Hi Group, I'm well on my way to learning css. I have run into a situation where I need a little help. There is a css class that is rather long built into a framework. It's for a slider caption. I've basically modified the frameworks css by making edits in a custom.css file that is called last. It is working as expected. The problem is that the caption is set to only display on one side of the screen and I would like to have the ability to to have 2 of these classes in order to let the user choose which side of the screen to display the caption. However the problem is I cannot simply rename the second class without breaking the slider caption, I have to keep the same css class name. So I was thinking maybe this is a scenario where I could use 2 css target id's in my html instead of the class. Each target could reference the same css class name but with different css content. Am I on the right track here? If so, could someone tell me what I would need to do, both in the css and in the html? The name of the class is .orbit-container .orbit-slides-container > * .orbit-caption { and it is called with <div class="orbit-caption"> Thanks for any help.
Hi. Surely a good slider plugin/ widget allows 2 different elements to use, each with different styles. I think you're on the right track by giving them different IDs. If ID is too luxurious, then 2nd-ary class targetting, e.g. <div class="orbit-caption my-customized-orbit-caption"> can be used.
Without seeing the code you're working with we're pretty much stuck guessing in the dark... you aren't saying what framework (NOT that I believe frameworks serve any legitimate purpose other than making things harder to do), what slider code it's using (not that I believe sliders serve a legitimate purpose on a website), or presenting any code -- and that treads into the "We can't help you" category of doing things.
Assuming the div only surrounds the caption, I'd say there's a good chance you could create a duplicate and change it to do what you want. It's not elegant and it's akin to using duct tape to fix things, but hey... it's easy. Duplicate the orbit-caption bit and call it orbit-caption-inverted or something. Change the alignment. Change the div class in the HTML. Upload it and see what happens. Gotta love the "suck it and see" method of doing things.
Well, I muddled my way through last night and here is what I came up with. It is working. .orbit-container .orbit-slides-container > * #left.orbit-caption { left code edits to orbit-caption class } .orbit-container .orbit-slides-container > * #right.orbit-caption { right code edits to orbit-caption class } <div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div> Code (markup): The div id returns 'left' or 'right' depending on how the post custom field is set by the user for the field called caption. Thanks to all who responded.