Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS for the cateogry archives page
- This topic has 7 replies, 3 voices, and was last updated 11 years, 2 months ago by jtdatawork.
-
AuthorPosts
-
January 10, 2013 at 9:27 pm #11130jtdataworkMember
I'm trying to apply styles to the default category archives (Blog) page here http://www.denisemazzola.com/category/blog/ Just want to place a
background pic so it always shows up on this particular page, but no other pages or posts.
Seems like it should be easy, but I can't find anything in the css that applies to just this page. Can anyone help me?
Thank you!
JT Dataworks Web design and SEO
January 11, 2013 at 4:21 am #11173Brad DaltonParticipantCreate a custom class using the field in the layout section for the blog page.
.custom-body-demo {
background-image: url ('images/bg.png');
}http://my.studiopress.com/snippets/custom-body-class/
Don't think you'll need this code if you use the custom class field
You'll see the class in the source code after you add it
Example:
January 11, 2013 at 8:45 pm #11380jtdataworkMemberHi Brad,
Thought I'd followed directions but nothing happened. Put code in the function file but it's not in the header of the page. YOur example didn't show up, could you post it again?
I should also amend what I said, I want this pic to show at the top of ALL category archives, so if she adds categories later, this will show up on all of them too. As long as "blog" is the parent category and I use this code, should that work?
/** Add custom body class to the head */
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
if ( is_category( 'blog' ))
$classes[] = 'custom-blog-class';
return $classes;
}**/
JT Dataworks Web design and SEO
January 12, 2013 at 3:27 am #11418Brad DaltonParticipantThat code won't work then.
You'll need a conditional statement and use the Genesis Simple Hooks plugin.
http://codex.wordpress.org/Conditional_Tags#A_Category_Page
There's a few ways to do this.
You could also create a widget area using the conditional tag.
Click To Grab The Code From Pastebin
Paste the code into the hook location you want to display your image and paste the HTML for your image between the tags.
genesis_after_header Hook
This hook executes immediately after the header (outside the #header div).
Make sure you have access to FTP or File manager in cPanel.
Code is tested
January 12, 2013 at 10:36 am #11456Jon BellahMemberChange the cutstom body class function to:
/** Add custom body class to the head */ add_filter( ‘body_class’, ‘child_archive_class’ ); function child_archive_class( $classes ) { if (is_archive()) { $classes[] = ‘custom-archive’; return $classes; }}
Then in your CSS you can target that by using:
.custom-archive { YOUR CSS HERE }
No need for plugins.
Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com
January 14, 2013 at 7:16 pm #11979jtdataworkMemberHi Brad,
That almost worked! The only problem is that it doesn't display correclty in relation to the background image (picture should touch green part of background corner to corner - see any page for example.) See http://www.denisemazzola.com/category/blog/ for how it ended up displaying. To do so the pic evidently needs to be IN the content area, not before it, so using the simple hooks didn't work.
I tried Jon's solution, which looked logical and easy, but got absolutely no response on the page when manipulating the css.
Stubborn problem. Trying to come up with any solution that will allow the banner to display dynamically...
JT Dataworks Web design and SEO
January 14, 2013 at 8:10 pm #11982jtdataworkMemberActually my blog page template ( http://www.denisemazzola.com/blog-page/ ) is correctly displaying the photo, so I am going to try to use that exclusively. Problem there is that I can't style the entry-content without it affecting the rest of the pages on the site. I thought I should be able to add .entry-content to the .blog-page class in the css and style it separately, (t works with the h2) but it isn't having any affect on the entry content.
Any ideas?
Thank you so much for all the time and patience you've put into helping me. This is without a doubt the most difficult customization I've had to do. 🙂
JT Dataworks Web design and SEO
January 14, 2013 at 9:08 pm #11988jtdataworkMemberAfter a few hours combing through the css, I was able to figure out how to style everything to my satisfaction. A huge thank you for your help. Brad, in getting the blog page template up and running.
JT Dataworks Web design and SEO
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.