Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

css question wordpress

i bought this theme and it seems that it's using custom css for some html properties..

demo.wpbakery.com/lightning/features/

I created a copy of the theme on my website, and added some automatically syndicated content that was already formatted and styled with CSS..  and the buttons are now a bit broken:

cloudcarib.bz/vmware

any ideas how I can bypass the theme’s custom CSS for this page only.. or even for the whole theme?

which property could be causing this break.. maybe some sort of padding?
0
darkbluegr
Asked:
darkbluegr
  • 6
  • 4
1 Solution
 
Jason C. LevineNo oneCommented:
The buttons are using tables to break them into left edge/middle button/right edge but the widths on the table are set to 100% whereas the cells have no width declaration.  So the content you added stretches the table out too wide and the gaps appear.

Just change the widths on the tables and cells to match the complete button element and image widths respectively and it should snap back into place.
0
 
darkbluegrAuthor Commented:
thank you for the quick reply, unfortunately i do not have any control into the content that gets pushed to the site , it's just a wordpress shortcode that i insert, and the syndicated content gets added to the site. so i was wondering if i could control the tables formatting on the theme side?
0
 
Jason C. LevineNo oneCommented:
Not really.

You can add a new CSS declaration locally for classes clsSVButton and clsSVCursor and try to constrain the width of the table that way (use !important so it gets picked up properly) but if that doesn't work then you'll have to contact whoever is providing this content and get them to code it correctly.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
darkbluegrAuthor Commented:
this is very helpful, thank you

may i trouble you for the syntax of this css declaration of clsSVButton?

0
 
Jason C. LevineNo oneCommented:
It's just normal CSS...

.clsSVButton {
  width: 100px !important;
}
0
 
darkbluegrAuthor Commented:
Hmmm seems fixed size wont work on some other sub-pages:

cloudcarib.bz/vmware?svpage=solution_serverconsol&sid=4f63e0d9d331fd7fd540d4a7e6aadfc8

I guess we are out of luck?
0
 
Jason C. LevineNo oneCommented:
Yeah.  Short of contacting the content provider or really blowing up all CSS related to tables locally (even then, may not work) and tweaking you are out of luck.
0
 
darkbluegrAuthor Commented:
thank you
0
 
darkbluegrAuthor Commented:
thanks
0
 
darkbluegrAuthor Commented:
the theme designer suggested adding this custom code. It improved the appearance but some gaps still display. any thoughts on how to fix the remaining small gap by using this method?

##

.page-id-1071 .main_content table {
    border: none;
    margin: 0;
    text-align: inherit;
    width: auto;
}

.page-id-1071 .small_tour_menu_ul li.odd,
.page-id-1071 .main_content table tr.even,
.page-id-1071 .main_content table tr {
    background: none;
}

.main_content tr td.page-id-1071 {
    border: none;
    padding: inherit;
}
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now