?
Solved

Help skinning wordpress blog

Posted on 2010-09-20
20
Medium Priority
?
347 Views
Last Modified: 2012-05-10
Hi,

I need some help in skinning my loop / posts on my blog (not live). I would like each post to be contained within its own background colour and to have some padding between posts so that they stand out. Something similar to vostok[dot]es/blog/

My blog can be found wychburyenergy[dot]com/news
0
Comment
Question by:newbey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 9
20 Comments
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33723973
Access your wordpress directory -> wp-content -> themes -> (NAME OF DEPLOYED THEME).

In that folder you will find a file called style.css, search the code for:  

ul.post-meta

As a test add a background like this:

ul.post-meta {
      list-style: none;
        background:#f00;
}

If your blog entries now have a red background let me know.

Easynow
0
 

Author Comment

by:newbey
ID: 33724511
Hi,

I can't fins a ul.post-meta class in the style sheet. I have added a class as above but there is no change on the background colour?

Thanks for looking
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33724846
Can you post a link to the style sheet? is it definitely located in the named themes folder?
0
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

Author Comment

by:newbey
ID: 33725614
style.css attached, it is definitely in the named themes folder
style.css
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33725697
Try adding this instead

.post {
        background:#f00;
}
0
 

Author Comment

by:newbey
ID: 33725864
still nothing?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726368
can you zip the theme folder and post? or give link to where u got it?
0
 

Author Comment

by:newbey
ID: 33726637
Here you go....
mywordpress.zip
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726687
Ok this is a guess but try this: (open page.php)

Replace this line:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

To read:
<div id="post-<?php the_ID(); ?>" class="testclass">

Then (open style.css)

And add this:
.testclass
{
    background:#f00;
}
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726797
Forget what i just said....

I just tested my earlier suggestion, and added:

.post
{
background:#f00;
}

to the very bottom of the style.css and it worked... please try that again, make sure its at the bottom.

Easynow
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726815
To ensure you have the correct style.css try renaming it to style2.css, it should mess the whole page up...
0
 

Author Comment

by:newbey
ID: 33726865
If I try and rename it to style2.css I get the following error message:

Warning: fopen(/home/content/31/6593431/html/news/wp-content/themes/wychbury/style.css) [function.fopen]: failed to open stream: No such file or directory in /home/content/31/6593431/html/news/wp-includes/functions.php on line 4165

I tried to put the post at the bottom of the stylesheet and nothing - is it because I am using 2 stylesheets?

I followed the instructions from this website to try and integrate it with my existing style

www[dot]rivergraphics[dot]net/resources-tutorials/how-to-integrate-a-wordpress-blog-into-your-existing-website/
0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 2000 total points
ID: 33726913
Very strange.... because the post blocks have a class called 'post'. The only reason it wouldnt work is if there was an overriding style...

going back to earlier suggestion then, try this (in the file page.php):

Replace this line:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

To read:
<div id="post-<?php the_ID(); ?>"  <?php post_class(); ?> style="background:#f00;">

If that doesnt do anything then im out of ideas sorry

Easynow
0
 

Author Comment

by:newbey
ID: 33727073
I can see red!
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33727330
haha thats a start then...

You should now be able to apply any css styles you like within the style quotes. i.e.

style = 'background:#eee;border-style:solid;border-width:1px;"

Easynow
0
 

Author Comment

by:newbey
ID: 33727369
Thanks, i'll have a look. Do I need to use padding to space my posts out?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33728377
try playing with padding and margin
0
 

Author Closing Comment

by:newbey
ID: 33730071
Thanks for your help, at least I know where to look.
0
 

Author Comment

by:newbey
ID: 33871514
Hi easynow111,

I know this post is closed now but could you let me know how I can reduce the size of the title text on the posts?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33873530
Look for this code in your page.php file:

                              <?php if ( is_front_page() ) { ?>
                                    <h2 class="entry-title"><?php the_title(); ?></h2>
                              <?php } else { ?>      
                                    <h1 class="entry-title"><?php the_title(); ?></h1>
                              <?php } ?>      

Add style elements as we did before:

                              <?php if ( is_front_page() ) { ?>
                                    <h2 class="entry-title" style="ADDSTYLEHERE"><?php the_title(); ?></h2>
                              <?php } else { ?>      
                                    <h1 class="entry-title" style="ADDSTYLEHERE"><?php the_title(); ?></h1>
                              <?php } ?>      

Easynow
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month7 days, 21 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question