Jump to content


Photo
- - - - -

How to make Blog/Post content appear different background/text color from rest of my site?


  • Please log in to reply
7 replies to this topic

#1 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 03:38 PM

Hi, first-time Pagelines user and first-time web designer. I am creating my website on a temporary URL right now, located at

Please Login or Register to see this Hidden Content

I want my Blog page and posts to have a standard-looking white background, black text. Current Blog page (not set-up yet):

Please Login or Register to see this Hidden Content

The rest of my site is very dark (streaming video/visual-themed) and I have either a black background (which I uploaded as an image) in the Meta, or dark splash images (photographs) uploaded as the background, against white text. I am using the Transparency theme. How do I create the Blog page and Blog Posts so that they are different from the rest of my website, with a standard white background and black text? I know it has to do with custom CSS, but I am unsure how to proceed. Thank You, UGHTV

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 April 2012 - 04:10 PM

You'll need to use Custom CSS that includes the following:

-Selectors that include the page IDs for the blog page and the individual blog posts
-The CSS attributes that will add the style to the blog page and posts (for font, font size, etc.)

The CSS for the blog page should look something like this:

Please Login or Register to see this Hidden Content


body.blog = The selector
{font-family: FONTNAME;} = The CSS attribute

The same applies to CSS for the individual blog posts.

To find the selectors you need and use Custom CSS to achieve the look you're going for, please refer to the Firebug tutorial at the bottom of this documentation:

Please Login or Register to see this Hidden Content

(it helps to read the first 3 sections if you're not familiar with CSS)

To find the CSS attributes that you need for the customizations, see the tutorials for different attributes on the left side of this page:

Please Login or Register to see this Hidden Content

(for example, for customizing the text style, see

Please Login or Register to see this Hidden Content

)

#3 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 06:40 PM

Thank you, I'll check into it. UGHTV

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 April 2012 - 06:41 PM

You're welcome :0

#5 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 08:26 PM

WELL, I was able to change the color of the blog page background to white by using this CSS code: body.blog {background-color:#FFFFFF;} I've been investigating and trying other codes, including fumbling around with Firebug, and I cannot find any CSS code that will work to tuorn all the fonts black (#000000) on my blog page. If you have any ideas or suggestions please let me know, thanks.

#6 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 08:27 PM

This is where I'm at right now:

Please Login or Register to see this Hidden Content



#7 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 09:25 PM

Firebug is making changes but they are universal, affecting my entire site. I'm just trying to make changes to one specific page.....

#8 ughtv

ughtv

    Member

  • Members
  • 11 posts
  • LocationChicago, USA
  • Framework Version:Version 2.1.6
  • Country: Country Flag

Posted 29 April 2012 - 10:04 PM

For now I have to change the page back to white text and black background.. I have to keep moving forward