Jump to content
Sign in to follow this  
wendygordon

Reader Customization - default tab

Recommended Posts

wendygordon+    6
wendygordon

I would like to put a background image or an image that is the size of the entire content box into the entire reader-of only the DEFAULT reader. (the reader that you see first that you have to enter in the Page Meta.)

I have been scratching my head how to find the correct css selector. If i put html into the default reader tab box, I get an image that is only using part of the box because of the padding settings. If i try to change the .reader-content-pad or .reader-content padding, then all of the content pads for the entire reader are changed.

I would like to style the DEFAULT tab completely differently from the other tabs in the same reader. is this possible?

and if so, what is the correct css/html? I have played with various combinations of #reader-1 and .readerdefault and no luck. I have tried calling the individual page and post id for the reader and tried to isolate the default tab and still - no luck

thanks so much. your help as always is appreciated.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Wendy, please edit your profile to include the full URL of your actual site. Only moderators and administrators can see it, not others and not search engines. This is critical to providing proper support for any topics opened.

While I don't use the Reader, once I can see your site with it in use, I can easily identify the elements to provide suggestions for changes.

Thanks for your cooperation.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

if you dont mind, i would like to PM you with the site URL and with the specifics. I can explain in more detail what you should look at and what i am trying to do.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Without your URL, we can only offer general support.

Each reader will have its own CSS selector. Just use Firebug for Firefox or Chrome's inspection tools to find it. For example, the others may say something like "clone" in the CSS selector.

You should also be able to target the default tab in a similar manner.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

I have updated my profile. I know what you are saying about firebug. I just cant find the selectors. Since I paid for this section, I am hoping that i can get a real answer - maybe from the person who wrote it and can actually tell me the specific tags. Unfortunately, your answer didnt help me at all. It is basically an easy question and with or without my url the question remains the same.... how can I style - i mean specifically what are the correct CSS selectors - to style only the DEFAULT tab in READER? There is NO "clone" class. the only classes and div ids that i can find are: #reader-1 and .readerdefault - and perhaps it is my lack of experience with ul and li syntax, but for the life of me, i cannot seem to target the PADDING on the default tab. any help would be appreciated

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

specifically. look at the reader that is under the menu item Print & Video Production/Work Productions - you will see an image in the default reader that utilizes the entire space of the reader because margins and padding are set to 0. but when you click into the readers, you will see that all the text is too close to the edges of the content pad. I need padding on the readers and no padding on the default tab.

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

i am sooo hoping there is a solution for this. anyone?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

OK so the Reader section wasn't designed (as far as I know) to house an image that spans the full width of the active reader area. However, you can try the code below, but in doing so you will also effect other reader areas.


.reader-content-pad {
padding: 0%;
}
#reader-1 {
background: url( path to image here );
}
[/CODE]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

yes. that is what I found. And I dont want to change the padding on the entire reader set. Just the default tab.

it seems strange since there is actually an id for #reader-1 and a class for .readerdefault - AND since the information is entered into the default tab directly from the meta panel on the page - it seems strange that it cannot be controlled. So, it is obvious that Reader treats the default tab differently.

Would there be a way to control it via the post id? I tried .postid-xx .readerdefault and also other combinations using .reader-content-pad and still no luck. Or maybe..would it be controlled by the html that you can enter into the meta panel on the post? and if so, what is the correct syntax?

thanks so much. This is the key to the design on part of my site. I am desperate for a solution. thanks so much.

Wendy

Share this post


Link to post
Share on other sites
wendygordon+    6
wendygordon

the solution!

.readerdefault p {

margin: -16%;

margin-bottom: -17.5%;

}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Awesome nice job!

I missed that one, thanks for informing us that the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The topic was marked as resolved.


Please search our forums, before posting!

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

Sign in to follow this  

  • Similar Content

    • janpeeters
      By janpeeters+
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×