I want to make the major event image on the left height larger, without affecting other pages.
https://islandeguide.com/event/
I Noticed this page has this that makes it unique
h2 class="theme-title" data-trans="Featured Events">Featured Events/h2
So I thought I may be able to do something like
page.themetitle[Featured Events] .col-sm-5 > .theme-box.theme-box-vertical > .theme-box-content img{
height: 350px;
}
I made this part up page.themetitle[Featured Events] so I knew it would not work.
Does anyone know if I can put something there that would work?
Note:
I can add CSS to custom CSS document, but that is all! I do not have access to change the HTML/PHP, also I can not add Javascript.
This website was designed in a way that makes it very difficult to target elements without changing others on different pages, as they share Classes everywhere.
Try this:
h2[data-trans="Featured Events"].theme-title + div.row div.col-sm-5 div.theme-box.theme-box-vertical img {
height: 350px;
}
Edit: You can shorten it a little using the child selector:
h2[data-trans="Featured Events"].theme-title + .row > .col-sm-5 > .theme-box.theme-box-vertical img {
height: 350px;
}
Related
Please find here a HTML snippet and the corresponding CSS which build a BorderLayout:
https://jsbin.com/zokutalafe/edit?html,css,output
-
The yellow area in that BorderLayout example shall have a height of 100%, unfortunatelly it has not :-(
The question is now: Is it possible to change that yellow container's height to 100% by just modifying the CSS, NOT(!) the HTML, without using new [Edit: I mean "additional"] CSS selectors (means: something like ".borderlayout-center > div { height: 100% }" is not allowed)???
This is for a very special use case - that's why I have the above mentioned strange constraints.
Thanks a lot in advance.
You can use like below:
.borderlayout-center div {
height: 100%;
}
I'm not shure what you mean with new CSS selectors
But something like
.borderlayout-center div{
height: 100%;
}
it's nothing new and it works...
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I'm trying to customize a Joomla template, which is based on Bootstrap. Specifically, I'm trying to make a "hardcoded" .span4 have the width of a .span3. Sure, it would be much easier to change the markup, but I think that's what css is for, despite the way most of us use Bootstrap for defining layout and visual appearance. Besides, where would be the fun of learning?
For that, this is what I'm trying in the my_css.less provided with the template:
.row-fluid #top1.span4 {
.row-fluid .span(3);
background:red;
}
Actually, the "background" bit is only to make sure that I'm not getting the selector wrong. So, I get that element with a red background, but the rest of the properties aren't applied. This is what I get instead:
.row-fluid .span4 {
width: 31.623931623932%;
}
Am I doing anything wrong? Is what I'm trying even possible?
Thank you!
* Edit *
This is the template I'm using in my page:
Perty by SmartAddons
The bit I'm trying to customize is the one at the right of the logo, the one holding the language selector and the social icons.
My client's logo is wider than the one in the template example, so it pushes #top1 to the right, and it pushes the following element (the one containing "galleries", "my account" and the search box) below.
Answering #Harry's question about selectors not matching, mine is ".row-fluid #top1.span4" because I only want my modification to apply to the .span4 contained in #top1. The other piece of code I pasted below is what is being applied instead of what I intend. Also, I wanted my customization to take preference over the default css, so my selector tries to be more specific. It doesn't seem to be wrong, because the background of the element becomes red.
#Harry:
Also, are you using any mixins to generate the width?
I'm not experienced in Less and I wasn't able to find the mixin in bootstrap documentation, but according to #freejosh at this post:
In mixins.less there's a mixin called .span(#columns) that's used to calculate the width, depending on #gridColumnWidth and #gridGutterWidth along with the argument.
Actually, that example is the one I'm trying to adapt to my needs.
I hope my edition made things clearer (or at least not more obscure, english is not my native language).
Thank you again!
* Edit 03/09/2014 *
Ok, I think I'm gettin closer. New code:
.row-fluid #top1.span4 {
#grid > .fluid > .span(3);
background:red;
}
Resulting css:
.row-fluid #top1.span4 {
width: * 3 * 2;
background: red;
}
Of course, the browser complains of an invalid property value. But at least that is a step (forward?)
#grid > .fluid > .span(3);
gives me:
.row-fluid #top1.span4 {
width: 23.40425532%;
*width: 23.35106383%;
background: red;
}
and NOT width: * 3 * 2;
Tested with less.php, less v1.4, v1.7.3. Notice that Less v2 do not compile BS2 at all.
Less v2 fails on #grid > .core > .span(#gridColumns); in navbar.less
Based on In MediaWiki, is there a way I can apply [[Image:<name>]] style resizing to external images?
Instead of adding an entry like this in the [[MediaWiki:Common.css]] page on the wiki
.image100px img { width: 100px; }
Would it be possible to change the css line with use of a mediawiki passed variable to set the width to an arbitrary value at runtime?
I now have 10 such lines to have a relative flexibility in external image sizing but would prefer to have something of the kind
.imagewidthpx img { width: {{{1}}}; }
I have no idea how to interact dynamically with common.css or even if this is feasible and I really need to embed external images with resizing.
Thanks
Something like this might work...
In MediaWiki:Commmon.css add:
.externalimage-holder {
position: relative;
}
.externalimage-holder img {
width: 100%;
height: auto;
}
then set up a template Template:Sized-external-image like this:
<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>
and call it like this:
{{sized-external-image|250px|https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg/1024px-%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg}}
Unfortunately I can't test it right now as I'm having some difficulties with my local installation.
I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).