Jump to content

Archived

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

tiltcreative

Is there an easier way to disable iBox description than targeting with CSS?

Recommended Posts

tiltcreative    0
tiltcreative

I am having some issues with iBoxes and better iBoxes, I have them in several places and some I want round, some not, some have descriptions, some not. I definitely don't want lorum ipsum text to appear when I don't have a description.

 

What's the best way to do this? Give each of them their own class?  I have something like this, but it doesn't seem to work all of the time.

.news_iboxes .better_iboxes .better_iboxes_desc {display: none;}
.bottom_ibox_links ibox-desc {display: none;}

Also, I am not quite clear on what is meant by:   Separate with a space " "     in the styling classes section.

Does that mean I would put the two classes in with just a space between them, or am I meant to put in the inch marks as well?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, yes you can add a class to each group of iboxes so you can manipulate them with css independently. You can add more than one class to each section, you won't need the quote marks just leave a space between each name you enter. 

 

If your css changes are working on some occasions but not all, then this will probably be down to the code you're applying, it might not be specific enough to target the element or there could be an error in the code about which is stopping anything below it from being read.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tiltcreative    0
tiltcreative

If something is called "entry-header" when you look at it in inspect element, and you have added a name to it in the custom styling classes, what is the protocol for css?

Should there be a dot between them? or just a space?  I can't quite figure it out and spend a lot of time trying things and am not sure how it works.

 

For example, shouldn't  

 

.text-scroll text-entry {overflow: auto;}   work?  Or am I targeting this wrong?

Share this post


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

Can you provide a link to your site please and in each of the iBoxes you want no description, add no description too and I will write up a quick snippet of CSS to remove it. You can then expand on this CSS to use on other Boxes. In regards to Better iBoxes, I am not sure how this section works as its third party, if it is similar then you will be able to use the same CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • Audun MB
      By Audun MB+
      I'd like to have the images in iBox to look different with the following CSS. This works when manipulating the CSS with Inspect element in Chrome, but I can't get it to work as a class. Here's the class:
      .imagecontain {     border-radius: 1px;     background-size: contain;     background-repeat: no-repeat;       } This is from my style.less in the child theme. I applied the class to the iBox with custom class option, though nothing happens. How to fix that? How do I target only the div with the image in with CSS?
    • dchetson
      By dchetson+
      I am trying to edit the text in an iBox but every time I attempt to make the change, it doesn't take. Website is www.chetson.com.
      Thanks!
    • Matt C.
      By Matt C.+
      I was wondering if there was a way to download legacy versions of DMS 2, so that I can downgrade my theme to the previous version before 2.1.9.9.  I'm having a weird visualization issue on my website http://udforu.com when it comes to the iBox sections and for some reason I can't retrieve the old version of DMS 2 from my backups.  There's also a weird shifted doubling effect that occurs on the search icon, as well as the icons on my pagelines dashboard.  If you know how to fix that issue that would be great, but as a quick fix if there's a way to downgrade that would be great.

×