I would like to add a custom css class to the native WordPress gallery. For example, this one outputs the following HTML:
<div id="gallery-2" class="gallery galleryid-1715 gallery-columns-4 gallery-size-thumbnail">
I'd like to just add in a custom class of iwmp.
What's the best way of doing this? I was hoping for a non JS solution. Thanks
EDIT: Answered my question below.
This link solved my problem: http://www.sk23.co.uk/wordpress/how-to-override-the-default-wordpress-gallery-embedded-css-styles-in-wp/
You have to remove the default gallery shortcode, and create your own. What I did was copy n paste it, and add in the new class.
Thanks
You should just be able to put your custom class in the list of classes and then, in your css file, describe the properties associated with that class.
For example:
Your html would be
<div id="gallery-2" class="iwmp gallery galleryid-1715 gallery-columns-4 gallery-size-thumbnail">
And then let's say you wanted everything in class iwmp to have a red background color and have center alignment you would add the following to your css file:
CSS addition:
.iwmp {
background: #ff0000;
text-align: center;
}
Related
I placed the search bar in the header by adding the string in child Theme:
get_search_form ();
I wish the bar was shorter and aligned to the right.
I tried unsuccessfully to add the following to the stylesheet:
.search-form {
max-width: 400px;
}
.search-form > label {
width: 50%;
It does not work.
Can someone help me?
P.S. The page is this: https://www.carifiglimiei.com/
'search-form' css class is not present in your website page.
Also
get_search_form ();
returns different structure than your current page html. I guess your search form is generated by any plugin.
Or feel free to share the search form code.
I used this function and found this code structure (manually added a wrapper class: search-form-wrapper)
As someone said above. Your search form is generated by some plugin and has no class search-form. From what I can see you should use class gsc-search-box as for editing in CSS. I tried to use this class and It worked. Hope I helped you :)
Sorry if this is a noob question, but I would like to know if there is a way to make custom tags linked to CSS entries (sorry if this the wrong terminology).
Like the h1, h2 tags but with a name I choose. So that I can apply these custom tags around text and modify it without doing inline styling for every instance or styling a whole div the same. So for example:
<customTag> This makes the text look like what 'customTag' is described in styles.css </customTag>
Is this possible? If so how can I do it?
Thank you.
In a HTML element you can provide the class="YourClassName" attribute to create a custom class that you can access in CSS.
Example:
In your html file you would write something like:
<p class="maintext">Hello World!</p>
And access the class in css like this:
.maintext {
color: #fff;
}
You could then add the class="maintext" attribute to any HTML element you'd like to have the same styling.
See this page for more information about HTML classes.
Sorry for being a newbie but i really need your help.
Heres the problem: i have my main wordpress theme with woocommerce, everything works fine. The thing is: i have a secondary theme with another woocommerce style and i need to get this woocommerce css to my main theme.
How could i do this? Because even if i copy paste the .css file, i will still need the html class's from the other theme.
I dont know what to do anymore, i really apprecite any help.
Thanks and sorry, english is not my native language.
#edit
i forgot to say: i dont need all the woocommerce css, i just this the product view. Like this: https://image.ibb.co/kkPtEc/Sem_t_tulo.png
You can use:
https://es.wordpress.org/plugins/custom-css-js/
Use appropiate selectors to target the elements that you want and reach them with more precision to take priority over other css.
For example:
.elementor-745 .elementor-element.elementor-element-lueowvi .elementor-image-box-content .elementor-image-box-title {
color: #0351d8;
font-size: 27px;
font-weight: 500;
}
this is a css selector with it's properties and values (copied from a wordpress that i did some time ago)
if i want this text for being red instead of this kinda blue and change the font size, for example, i'll have to:
div.elementor-image-box-wrapper > div.elementor-image-box-content > h3.elementor-image-box-title {
color: red;
font-size: 30px;
}
Why i did this selector?
i know that this element is inside a div with elementor-image-box-content class, which is inside a div with elementor-image-box-wrapper.
Note that i also specified the html tag in css selector.
Why should it work?
the selector i set is more specific compared to the main theme one. So it will take priority when the css is rendered.
If you deal with id-based classes you'll need javascript (i recommend you to use jQuery as it's loaded by the theme or by some plugin almost always and will let you work faster an cleaner.
when i say id-based classes i mean those like:
<div class="product-id-25">
<!-- other code -->
</div>
<div class="product-id-26">
<!-- other code -->
</div>
You'll need to select product-id-* and make a for each loop to add the css through jQuery (for example)
I have wordpress site with some layout.
I need to change some css there, but got troubles overriding it.
Via webbrowser my CSS looks like:
It is places (genetated?) somewhere in theme.
Every time I refresh page I got different 'class-xyz' (on the screen it is: class-GkgfbCohxE) name in #inbound-list
I have added to custom CSS below (changed color):
But this is not loaded.
All structure of this CSS:
Do you know how to enable ovverriding this element?
It depends on the theme and plugin you use.
For my experience, this dynamic inline CSS may come from the page builder you use. If it comes from page builder, please check your page builder and adjust the style.
If you want to overwrite the css, you could simply put !important after the color attributes.
To override this css you need to use any parent id like below or you can apply some id to your body tag and write ur css with its reference
see my ex below
#parent #one li{
color: blue;
}
#one.asd li{
color: red;
}
<div id="parent">
<ul id="one" class="asd">
<li>aaa</li>
<li>bb</li>
<li>adfdf</li>
</ul>
</div>
If it's a your theme styles, you can create a child-theme, then overwrite the styles. You can also use the same selector in the child-theme css, WordPress knows that it has to take the ones from the child-theme.
I am using a Wordpress theme named KALLYAS, and I am having trouble adding CSS to a specific class. This theme uses multiple shortcodes. So lets say I want to add a background with CSS to the gray area on the homepage only WITHOUT EFFECTING THE GRAY AREA ON ANY OTHER PAGE. also how would I go about adding CSS to a shortcode on a specific page aswell? I am guessing it is same way.
That worked because if you notice on the code in the theme preview it says :
<body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true">
it would also work if you used any of them like :
.page-id-17 .greyarea { color:#ccc }
.home.page-id-17 .greyarea { color:#ccc }
You need to scope your CSS if you want it to just display on one page. Grab a unique class or ID from a parent on that page, and place that in front of your css selector.
Ex
.uniqueClass .greyarea { color:#ccc }