WordPress.org

Ready to get started?Download WordPress

Forums

Squelch Tabs and Accordions Shortcodes
[resolved] background images (8 posts)

  1. Tan_kay
    Member
    Posted 1 year ago #

    Hello there Matt, I have installed your wonderful plugin and I am quite eager to utilize it's potential as an accordion to disply my main content. I am however having an issue applying background images to the seperate categories of such an accordion. My attempts have been through CSS with no success. JQueary is foreign to me at present and there might lie my problem. To the question; I'm I on the right track with applying the images through CSS providing I use the right selectors or is this a JQuery UI task? Or is it that all I need is a second shortcode plugin to assist in this matter?

    Thanks for you time and direction,

    Tan

    *here is the CSS I have been hacking about...

    .squelch-taas-override.squelch-taas-accordion .ui-accordion-header {
        margin: 20px 0 0 0;
        padding: 0 0 0 0;
        font-weight: bold;
        letter-spacing: 0;
        text-transform: none;
        font-size: 16px;
    }
    
    .squelch-taas-override.squelch-taas-accordion .ui-accordion-content {
    	margin: 10px 20px 2px 20px;
    	color: #FFF;
    }
    
    #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	padding: 40px;
    }
    
    .ui-widget-content #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/'jasper.jpg');
    	border: 1px solid #fff;
    }

    http://wordpress.org/extend/plugins/squelch-tabs-and-accordions-shortcodes/

  2. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Tan,

    All styling is done with CSS and so

    .ui-widget-content #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/'jasper.jpg');
    	border: 1px solid #fff;
    }

    ...should be...

    .ui-widget-content#ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/jasper.jpg);
    	border: 1px solid #fff;
    }

    Although I recommend you actually use the Squelch TAAS override class for all styles, which would make the above into:

    .squelch-taas-override #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/jasper.jpg);
    	border: 1px solid #fff;
    }
  3. Tan_kay
    Member
    Posted 1 year ago #

    Hey Matt, isn't it funny all we need sometimes is a littel nudge in the right direction. Thanks for the reminder about '.squelch-taas-override'. If it is not to much I have one other inquirey. Concerning my headache over trying to seperate the content text away from 'bg' image and it's opacity. I've been messing around with #ui-accordion-squelch-taas-accordion-0-panel-0 and .squelch-taas-accordion-shortcode-content-0 with little luck. Should I try else where in the accordion's code? Any tip is apperciated and thank you dearly for the help.

  4. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Tan, I'm not sure I understand your question. What are you trying to achieve?

  5. Tan_kay
    Member
    Posted 1 year ago #

    Oh okay well what I was trying to communicate was that in each content section of my accordion there is text overlaying an image. I would like to have the text standout more against the image so I have been attempting to set a 50% opacity style to the image only. Though when I apply the code both the text and image are affected by the opacity setting in CSS. I'm sure you understand, the confusion for me is that I have tried the code under both the div.id and div.class mentioned above. I am coming to the conclusion that they are not seperate, that they share the same div. I suppsoe my qestion is, is the background at all seperate from the text? If so which selectors should I use, sorry for the noob questions, hard to put out there, I enjoy hacking about but you can only get so far sometimes. This is what I have in mind -

    thanks

  6. Tan_kay
    Member
    Posted 1 year ago #

  7. Tan_kay
    Member
    Posted 1 year ago #

    Hey Matt thanks again I figured it all out. Cheers

  8. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    OK no problem, thanks for letting me know.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic