Jump to content


Photo
- - - - -

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


Best Answer James B , 15 January 2013 - 04:14 AM

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...s/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;}

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 14 January 2013 - 12:19 PM

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 

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 January 2013 - 01:39 PM

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

 

Please Login or Register to see this Hidden Content

 

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.



#3 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 14 January 2013 - 02:47 PM

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



#4 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 14 January 2013 - 05:49 PM

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 



#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 January 2013 - 04:14 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content


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.

 

Please Login or Register to see this Hidden Content

 

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.

 

 

Please Login or Register to see this Hidden Content



#6 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 15 January 2013 - 05:38 PM

Thanks for the reply guys. 

 

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

 

Cheers, 
Matthew 



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 January 2013 - 09:26 PM

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



#8 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 16 January 2013 - 09:02 AM

Cheers guys, this worked perfectly! Much appreciated. 

 

Matt