Archived

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

  • 0

Resolved Reader Customization - default tab

Question

Posted · Report post

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

11 answers to this question

Posted · Report post

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

Posted · Report post

the solution!

.readerdefault p {

margin: -16%;

margin-bottom: -17.5%;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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]

Share this post


Link to post
Share on other sites

Posted · Report post

Awesome nice job!

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites