WordPress.org

1. raganook
   Member
   Posted 1 year ago #

   OK:

   So our blog has four unique authors on it. On the server are four pictures; Rob.png, Joe.png, Steve.png and Sam.png. What we want is for Wordpress to change the style of the post TITLE based on who wrote it. Reason being, we want the image in the background to change based on who is typing. We are using the K2 theme.

   I have the style perfectly under the H3 section, and here it is:
   

   font-size: 2.4em;
   	font-weight: normal;
           text-indent: 105px;
           margin-top: 20pt;
           padding-top: 22px;
           padding-bottom: 0px;
   	letter-spacing: -1px;
           width: 500px;
           height: 64px;
           background: url(http://www.ghosteo.net/wp-content/uploads/2008/08/joe.png) no-repeat;
           background-size: auto;

   The issue with leaving it as-is is that EVERYONE ends up with Joe's background.

   What do I need to do in order to make word press call a different image when a new person posts?

2. chaoskaizer
   Member
   Posted 1 year ago #

   what is your blog URL?

   FYI K2 has author slug-name CSS classname inside the body HTML tag & post div, you can try the following example:

   on frontpage
   

   .author-admin  .entry-title{
     /* author specific css */
    font-size: 1.3em;
   }
   .author-joe  .entry-title{
     /* author specific css */
    color: pink
   
   }

   on single, archives or custom page section
   

   body.s-author-joe .post .entry-title{
     /* author specific css */
           background: url(http://www.ghosteo.net/wp-content/uploads/2008/08/joe.png) no-repeat;
   
   }

3. raganook
   Member
   Posted 1 year ago #

   This seems incredibly helpful, but I'm afraid I'm too inexperienced to understand where to paste the code you gave me.

   "single.php" and "archive.php" exist, so I can guess maybe it goes somewhere there?

   Thanks for the advice so far :) Hopefully you can give me a shove in the right direction :P

   Blog URL is http://www.Ghosteo.net. You can see that at the moment we have unique gravitar images next to the body of the post, which is not even close to what we want. We need the background of the post TITLE to change with the author.

4. raganook
   Member
   Posted 1 year ago #

   Well, I've tried pasting that code into practically every spot that seems to make sense, but absolutely nothing changes.

   I think I'm in need of a little hand-holding to actually make use of your advice.

   Please assist!

5. chaoskaizer
   Member
   Posted 1 year ago #

   paste it in K2's style.css (Design > Theme editor > style.css or */wp-content/themes/k2/style.css)

   try the below code
   

   .author-Raganook .entry-title{
    font-size: 1.8em;
    background-image: url(http://www.ghosteo.net/wp-content/uploads/2008/08/raganook.png);
    background-repeat: no-repeat;
    height:65px;
    padding: 24px 0pt 0pt 84px
   
   }

6. raganook
   Member
   Posted 1 year ago #

   Worked like a charm. You're my hero :)

7. chaoskaizer
   Member
   Posted 1 year ago #

   Glad it solved, btw I checked your CSS code again, some part are redundant. Try CSS group selectors ↓

   find
   

   .author-Raganook .entry-title{
    font-size: 2.4em;
   	font-size: 2.4em;
   	font-weight: normal;
           text-indent: 105px;
           margin-top: 20pt;
           padding-top: 22px;
           padding-bottom: 0px;
   	letter-spacing: -1px;
           width: 500px;
           height: 64px;
           background: url(http://www.ghosteo.net/wp-content/uploads/2008/08/raganook.png) no-repeat;
           background-size: auto;
   
   }
   
   .author-liero116 .entry-title{
    font-size: 2.4em;
   	font-size: 2.4em;
   	font-weight: normal;
           text-indent: 105px;
           margin-top: 20pt;
           padding-top: 22px;
           padding-bottom: 0px;
   	letter-spacing: -1px;
           width: 500px;
           height: 64px;
           background: url(http://www.ghosteo.net/wp-content/uploads/2008/08/liero-blank1.png) no-repeat;
           background-size: auto;
   
   }

   replace with
   

   .author-Raganook .entry-title,
   .author-liero116 .entry-title,
   .author-Somebody .entry-title{
       font-size: 2.4em;
       font-weight: 400;
       text-indent: 105px;
       letter-spacing: -1px;
       width: 500px;
       height: 64px;
       background-repeat: no-repeat;
       margin: 26px 0pt 0pt;
       padding: 22px 0pt 0pt
   }
   
   .author-Raganook .entry-title{
       background-image: url(http://www.ghosteo.net/wp-content/uploads/2008/08/raganook.png)
   }
   .author-liero116 .entry-title{
       background-image: url(http://www.ghosteo.net/wp-content/uploads/2008/08/liero-blank1.png)
   }
   .author-Somebody .entry-title{
       background-image: url(http://www.ghosteo.net/wp-content/uploads/2008/08/somebody.png)
   }

Topic Closed

This topic has been closed to new replies.