On several occasions, you may notice a certain style or display in your website that needs a little bit of working on. It may be a problem on the layout of a template that needs to be fixed or any other problem. An example of this is the header of your pages displaying a certain undesirable attribute. You know the attribute or style is undesirable and you want to change it. You know the style is on the header, but you just don’t know how to go about finding the header and fixing the problem. You may luckily find the header, but after hours of searching still not find the particular style or any reference to it. This can be discouraging and stressful. Is there an easy way to go about this you may wonder. Yes there is.
You know where the problem is, you just can’t find the problem. In the above example, you need to locate the header section and search for the problem.
To begin, carefully examine a generated page. Examine the header section closely and look for anything fishy in the header section, or anything that has a code or description that fits your problem. For example, the header problem you are trying to solve is an empty carousel space showing up on the header section. It is very likely you will find something with the word Carousel when you view the page’s source code.
To view a page’s source code, go up to the menu bar of your browser and choose VIEW > PAGE SOURCE or VIEW > SOURCE. A page will pop up featuring the source code of the page.
Use your handy detective tool, Ctrl+F, to activate your search. Type in “Carousel” and click FIND. Odds are, unless you have the words “Carousel” in your posts or links, it will take you to the first showing of the word “Carousel” which is most likely to be in your header section. If it returns a result with many Carousels on the site, hit FIND again until you’ve found the right Carousel which should be in the header area since that’s where the problem is
If you are using Internet Explorer, an alternate method is to use the Internet Explorer Developer Toolbar, which allows you to visually see and select the elements, IDs, and classes on the page. It displays the elements within the hierarchy of the page, their CSS attributes, and can outline DIVs, tables, etc. You can download the Toolbar from Microsoft.
Once you’ve found the word, it’s time to play CSS detective. Look up through the code from the word Carousel” for one of two things. It will look something like either of these, using words like header, top header, logo, etc.
<div id="header"> or <div class="header ">
This is the main section that contains your header menu. You’ve found the first suspect.
Now, open your style.css file and do another search for header or whatever the resulting name was that you uncovered. It is usually identified in two ways:
#header or .header
Look in the styles under these CSS selectors and see if there is a mention of Carousel and delete the code or fix it if you know what to do.
What if after deleting the code and the problem continues? Then most likely the header is not the problem. It may be the carousel is defined again in the content area.
Return to the generated page source code and search for the first words of your post. Look above that for something like:
<div id="content">
It could be called content, page. post, maincolumn, widecolumn, or have another alias, but it should be the CSS container that holds your post information. Now, go back to the style sheet and check to see if there is a carousel in that section.
If all of these doesn’t work, try something else. Return to the hiding place of all styles, the style.css file, and frisk it by doing a search for “carousel” and look carefully at each suspect. Note the selector ID name, like sidebar, menu, content and page, and then go back to the generated page source to see if that might be your culprit.
When you find the carousel, you may simply cut out the code. Do well to paste it in your note pad just in case cutting of the code doesn’t solve the problem so you can restore it.
Then save the edited style.css and upload it to your site. Refresh the generated test post and see if the unwanted carousel is gone. If so, you found the culprit. If not, return to the Notepad and copy the code and put it back into your style.css in the “content” section, putting things back where you found it.
This simple yet intense procedure can be applied in solving most CSS problems. However, be sure to know a thing or two about CSS before editing your stylesheet.
