Jump to content


Photo
- - - - -
Resolved

Home page only font color



  • Please log in to reply
13 replies to this topic

#1 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 29 September 2012 - 10:48 PM

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.

#2 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 September 2012 - 11:07 PM

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

#3 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 30 September 2012 - 12:11 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15194 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 September 2012 - 10:24 AM

Hi,

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

#5 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 03 October 2012 - 02:01 AM

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.

#6 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 03 October 2012 - 04:06 AM

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:

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



#7 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 03 October 2012 - 11:08 AM

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:

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content


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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 October 2012 - 09:21 PM

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!
  • WebWerx likes this

#9 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 05 October 2012 - 05:03 AM

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 }

?????

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15194 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 October 2012 - 08:32 AM

Hi Kashanti,

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


Please Login or Register to see this Hidden Content



#11 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 19 October 2012 - 02:28 AM

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.

#12 kashanti

kashanti

    Advanced Member

  • Members
  • 63 posts

Posted 19 October 2012 - 02:51 AM

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

#13 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 October 2012 - 04:56 AM

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

#14 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 October 2012 - 04:56 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved