Jump to content
mattpato

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

Recommended Posts

mattpato    0
mattpato

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mattpato    0
mattpato

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
mattpato    0
mattpato

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
James B    436
James B

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;}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mattpato    0
mattpato

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mattpato    0
mattpato

Cheers guys, this worked perfectly! Much appreciated. 

 

Matt

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×