Resolved Home page only font color

[kashanti 0]

oh man, in changing the page color of my home page, I didn't think about the need to change the font colors for everything on the home page only. How do to this? If to complicated, just let me know, and I will use a lighter shaded color so that I dont have too.

[WebWerx 0]

Are you running the Base Theme? If so, you can isolate the CSS for individual pages. You can actually do it another way. But using Base is the best approach --- IMHO

[kashanti 0]

Umm if you mean do I just have the framework with no child theme, then yes I am running the base. If that is not what you mean, then I don't know if I am.

[Danny+ 1,327]

Hi,

I am not quite sure what you're referring to, can you explain in greater detail please or provide a screenshot please.

[kashanti 0]

What I mean is now that i have changed the content color to something other than white the colors for some of the text (hyperlinks, etc) are not as easy to see, so I wanted to make them a little darker, but only for the home page.

[evan 0]

You just need to add some extra CSS/LESS to your custom styles to modify the text other colors you want to change for that page. You can use the page-specific body classes to make sure these rules only apply to that page.

If your home page is your main blog page with all your posts, your CSS would look something like this:

.blog myselectors { somecss }

If your home page is a normal/static page, your CSS would look something like this:

.home myselectors { somecss }[/code]




Which selectors depend on what elements you want to modify of course, but if you prefix it with the right body class, it will only apply to that page.  This is really easily done in LESS using nesting like this:

[code] .home { div, p { color: #333; // or whatever color } h1,h2,h3,h4,h5 { some other stuff just for this page } } [/code]

[WebWerx 0]

You just need to add some extra CSS/LESS to your custom styles to modify the text other colors you want to change for that page. You can use the page-specific body classes to make sure these rules only apply to that page.

If your home page is your main blog page with all your posts, your CSS would look something like this:

.blog myselectors { somecss }

If your home page is a normal/static page, your CSS would look something like this:

.home myselectors { somecss }[/code]




Which selectors depend on what elements you want to modify of course, but if you prefix it with the right body class, it will only apply to that page.  This is really easily done in LESS using nesting like this:

[code] .home { div, p { color: #333; // or whatever color } h1,h2,h3,h4,h5 { some other stuff just for this page } } [/code]

Install Base (free). Then do what Evan suggests. It's what I mentioned in my previous comment. But articulated far better!

[Rob 547]

Just to clarify further, Base theme is available via The Store and as WebWerx points out, is free. That serves as a place to add lots of customizations. However, to make changes to one page, you don't necessarily need that. The CSS that Evan provided may be added to Dashboard > PageLines > Site Options > Custom Code under CSS Rules; or, if you have the PageLines Customize plugin, via the style.css sheet there.

PS.. Thanks Evan and WebWerx for your intuitive input!

[kashanti 0]

umm, ok not sure I really understand. do you mean I would paste in the code like this:

.home myselectors {.home {div, p { color: #333; // or whatever color }

?????

[Danny+ 1,327]

Hi Kashanti,

What Evan meant by "MySelector" is the selector for your text, view my examples below:

.home p { color: red; }


.home a { color: yellow; }

.home a:hover { color: pink; }


.home h1, .home h2, .home h3, .home h4, .home h5, .home h6 { color: green; }


.home .site-title { color: orange; }[/CODE]

[kashanti 0]

lol ok well that is weird. I pasted in the code above for the .home h1, home. h2, etc and it changed the colors for all the links except two.

[kashanti 0]

I figured it out. some of the headings were listed under title "A" and not H1, H2, etc.

[James B 436]

We're glad you got this sorted, we'll resolve this thread for moderation purposes.

[James B 436]

The topic was marked as resolved.