Archived

This topic is now archived and is closed to further replies.

  • 0

How to add unique full width banners to individual Author post pages? - Need Advice

Question

Posted · Report post

Hi Everyone, 

 

I am wanting to add a different full width image banner to each individual author post page.

 

For example, if I have two authors associated with the website who post articles then I will have the following URL's 

 

domain/?author=1 

domain/?author=2 

 

Each one of these needs to have a different full width image at the top of the page before the content. 

 

I have been told that this requires some custom CSS in order to make this happen so I am looking for any advice possible. 

 

Currently using the pagelines theme on the pagelines framework. 

 

I am working on the site locally so I do not have any links to show, sorry. 

 

I know it is possible to use the sections on the framework to add a banner or image to the author post pages however you can't seem to to select which banner goes on which author page. 


I hope this makes sense. 

 

Thanks in advance for any help provided. 

 

Cheers, 
Matthew 

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi there,

 

The easy way would be to put in a full width sidebar to the author template and then add the required amount of blank text widgets for the amount of images/banners you've made.

 

Add each image to the full width widget using html and giving it a unique class like below.

 

<img class="author1" src="your full url">


So now in theory each author page has all the banners on it. So you could use css to remove using Danny's method above or use a plugin like 'widget logic' to assign which ones to which pages via the page id.

 

http://wordpress.org/extend/plugins/widget-logic/

 

If using css you would put the author page, followed by the class for the widget you want to hide and set the display to none.

 

 

.author-eric .cartmanbanner {display:none;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply guys. 

 

Where do I find these html snippets to edit? Sorry, I am a little lost. 

 

Cheers, 
Matthew 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, just click on the expand source link inbetween the text in the post above

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Matthew,

 

Every page is given a unique class, which can be used in your custom CSS, to add/remove or style elements for that specific page. These unique classes can be found in the body class of your page, for example,


If you go to the author=1 page and then load up either Firebug or your browsers built-in tools, inspect the body class and the author classes will be there for that page, these usually look like this:

 

.author-name (replace name with the authors name.

.author-1

 

http://d.pr/i/NHZu

 

If you were to go to your author=2 page, the classes would look like this:

 

.author-name (replace name with the authors name.)

.author-2

 

With the author name class, lets imagine that the first author (author=1) name is Eric and author=2 name is Cartman, the .author-name classes would look like this:

 

.author-eric

.author-cartman

 

Using these classes, allows you to add/hide or style elements for these individual pages.

Share this post


Link to post
Share on other sites

Posted · Report post

Cheers guys, this worked perfectly! Much appreciated. 

 

Matt

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply. 

 

I have found the classes using firebug however, where are they located to make the live change on the files? Once I have done that I am not sure what I need to do with them. 

 

Cheers, 
Matt

Share this post


Link to post
Share on other sites

Posted · Report post

Really looking for help here guys, if you could provide me with anything you feel may help me get the job done that would be fantastic. 

Cheers, 
Matthew 

Share this post


Link to post
Share on other sites