Styles not applying to all pages

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 5 years ago.

Author Posts

guyrws

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hi,

I’m editing Twenty Ten Theme and have managed to get the style that is applied to my title not apply to my the title on my home page. That is, every page has my styled title except the home page.

I thought that would be impossible? Doesn’t Microthemer edit the Theme leaving WordPress to edit the pages or am I missing something?

Can anyone give me some idea as to what I’m doing wrong please?

Guy.


Sebastian

Hi Guy,

You are right that Microthemer doesn’t alter page content like HTML or text and images etc. It just creates a separate style document which overrides the default styles.

The reason your site title style is working on all pages except the home page is that the Twenty Ten theme has slightly different HTML mark up for the site title on the home page compared to other pages. You can solve the problem by:

1. Clicking the “Modify Selector” link on your site title selector
2. The code in the “CSS Selector” textarea will probably look something like this:

div#site-title a

3. You just need to delete the “div” bit so that it just has:

#site-title a

4. The reason you need to do this is because on the home page, and only on the home page, the site title is actually a Heading 1 element (h1), not a div element. It still has an id of “site-title” however and so by removing the element specification of it being a div you can target the site title on all pages by the common id used.

I hope that helps. Please let me know if you still require assistance.

Thanks,

Sebastian


guyrws

Hi,

Excellent, it work first time, thank you.

Whilst I have your attention may I ask a supplementary question?

I have selected the page menu bar and changed the colour. However, when I try to change the font’s colour nothing changes. The weight, style, variant and size but not the font or colour.
I can do it by selecting each page button individually. Is there a way to group select elements please?

Cheers, Guy.


Sebastian

Hi Guy,

it sounds like it could be a CSS specificity issue whereby the font styles you’re trying to override are too specific to be overridden by the broader selector Microthemer suggests. Could you post a link to your website here so that I can investigate things properly?

Many Thanks,

Sebastian


guyrws

Hi,

Here it is:
http://thisisthewayup.co.uk


guyrws

Hi,

I’ve sussed out the buttons. What I did was: double clicked the home button element, using the wizard moved to parent element, till all the buttons were highlighted and then named it buttons. Simples eh??!!

Whilst I, still, have your attention may I ask a child-supplementary question please?

How do I change the rollover behaviour please? i.e. when I hover over linked text how do I get it to change colour.

Getting there, Cheers Guy.


Sebastian

Hi Guy,

Well done for figuring out the issue with styling the menu links. An alternative method could have been adjusting the value in the dropdown menu of the selector wizard (instead of using the directional controls). This is probably what you will need to do for adjusting how the links appear on hover. You need to create a new selector in the same way that you created your “Buttons” selector only this time look for options in the selector wizard dropdown menu that have “:hover” at the end. Name your selector “Buttons Hover” or something and then apply your styles. You will notice that your styles only apply when you hover your mouse over the menu items (assuming all has gone to plan).

I see that your current selector code for the buttons is “div#access a”. Alternatively you could manually create a new selector (using the plus button to the right of the selector menu) and give it the following code “div#access a:hover”.

If you get stuck with anything just shout!

Thanks,

Sebastian

You must login or register to reply to this topic.