I'm building a plugin, which is used by many online stores. When the user uses my plugin, he can generate a template (sample like this) in his store. Each store will use its own theme.
Now the question comes. Some themes are using a .page-width class to determine the container width. Some are using .wrapper class and .page-width is not available in the css file. I believe that .page-width is widely used than .wrapper in general.
How can I set the class for my container? If I just use <div class='page-width wrapper'> and the theme has 2 classes, will the wrapper class break the layout? Or I should use my own definition of .page-width class to override the original?
Since there are more than a hundred themes. I don't know how to best fit different themes.
One possibility that you can use is setting the style also for the "collision" elements
.page-width, .page-width.wrapper {
width: 500px;
}
For elements with class page-width, it will get applied (of course).
For elements with both classes, the selector has higher priority (2 classes) than a selector with only .wrapper, and will be also applied.
Related
Is there a way to generate pixel/percent/rem sizes with a sass mixin from a div class? For instance, here's an example of what the class might be set to:
<div class="height-134px width-33percent">
And this would be the CSS output:
.height-134px {
height: 134px;
}
.width-33percent {
width: 33%;
}
Basically trying to make it really easy for a content manager/designer to finely adjust certain things if needed.
No, that's not how Sass works. Sass doesn't read classes from your HTML. You'd have to first use Sass to create a class for every possible property and value for that to work. I'd suggest looking into CSS utility class frameworks like Tachyons or Tailwind, which have predefined classes for a lot of things that content managers can then use in HTML.
I have a div element which has 3 classes:
<div class='captcha_article captcha_email captcha_register'></div>
How can I target the third class for example, without affecting the style of the other two classes in the div?
Also, if I were to have 4 classes, how to target the last one without using last-child property ? Would :nth-child apply here?
You misunderstand CSS.
You can add styles to the captcha_register class by doing this in your CSS file.
.captcha_register {
// Attributes go here
}
Depending on where this is placed in your CSS file will determine if any of the style attributes adding to the captcha_article and captcha_email classes will be affected.
For example:
.captcha_article {
height: 200px;
}
.captcha_register {
height: 100px; // This will override the height of 200px on the div
}
UPDATE
If each class is suppose to represent a different web page then adding them all to the same element might explain why you are seeing unexpected results. It might be better to combine the styles that appear in all classes into one reusable class, lets call it .page. Then on each page you use this you can modify it with another class, if it needs to be modified.
I'm making a few changes to a site and want to change the width of the container to go across the whole page. I'm a bit of a noob so not sure if I've don't it correctly, but want the width to be 3000px. I have the option of container id and container class. So basically what CSS do I put in which box?
The theme I am using is Porto by Spyropress. But looking for some CSS help:)
Thank you very much!!
In the CSS style page (or code) where you have the container, you should write the following line:
width:3000px;
The most straightforward answer would be to use the style="width: 3000px;" definition instead of the id or the class (even if it is not a really clean choice).
If you have no chance to add a style and you have called a CSS, you can do it by id or by class, depends on how often you will have Elements with 3000px width (single time go for id, multiple times go for class). In general classes and id link the parts in your CSS with your html definitions (named-links). They do not serve you with direct CSS, this is done by the style="" Element.
Some Code:
#some_id {
width: 3000px;
}
.some_class {
width: 3000px;
}
And some additional info about general css (because it is much more than just id's and classes if I think about the cascading part): http://www.cssbasics.com/
When I am learning Bootstrap, I saw a class "barone" in a tutorial, but they didn't explained the use of that class. This is the site
http://www.w3resource.com/twitter-bootstrap/tutorial.php
Is there any class in Bootstrap in this name?
Thanks
From what I know, classes are used to group elements together. As you can see in the following example:
p.exampleID3 { background-color: #013370; color: white;}
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
The class is exampleID3 and is present in the css file. In your case "row barone" should be somewhere in the css file, but it's not shown in the tutorial and you don't really know what it contains.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)