Could somebody tell me how to change (or even find a file with), this code in wordpress?
I know what to change but I have no idea how.
I've already checked:
All of the *.css files in my themes?
All of the *.php files.
And this is not in a Visual Editor in WP.
How to do it?
If it's just a one class that needs it's properties changed go to the visual editor and override the inline style with !important rule, like this:
.content {
min-height: 150px !important;
}
Also be careful when using !important - it should be used sparingly.
Related
I have just started learning SCSS and what I have noticed is, there is something going on with importing partials in the 'main.scss' file. I am using live-server to host the website locally and every time I modify something, in simple words, it doesn't work.
It doesn't show up on the website when it refreshes automatically in the browser.
And now, what I see is all my styles are gone, even though everything in my files is still the same.
This is my main.scss file below.
// ABSTRACTS
#use "abstracts/functions";
#use "abstracts/mixins";
#use "abstracts/variables";
//PAGES
#use "pages/home";
//COMPONENTS
#use "components/button";
//BASE
#use "base/base";
#use "base/animations";
#use "base/utilities";
#use "base/typography";
//LAYOUTS
#use "layouts/header";
#use "layouts/grid";
Note:I also used #import for this, but it's the same.
This is my partial which I am trying to modify.
.row {
max-width: $grid-width;
background-color:yellow;
margin: 0 auto;
margin-bottom: $gutter-vertical;
}
What happens is, the background color doesn't change. It just stays the same. It's not a code problem since I have tried the same with the CSS code inside a style tag. So I am sure it is related to SASS import.
This could be a number of problems:
The element you're trying to style doesn't have class="row" set on it.
You're not importing the right partial. It's impossible to tell what each of the files you're importing are.
Something is overriding the style that you're setting. For example, a more specific selector (e.g., div.row) or something using !important.
The best way to test is to use your developer tools to look at the imported stylesheet (be sure it's there, of course) and search to see if you can find the rule that you've defined. Then, look at the element you're attempting to style and be sure it has the row classname. Last, check to make sure that nothing else is applying a style which would override the style that you expect to find.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
hi guys im trying to overwrite the styles on our wp plugin and style it in our own style sheet is there a way to do this? ive tried making classes for them in the style sheet with the same name as the plugin, ive also tried using !improtantafter... here is what it looks like in dev console.
and this is the code i used to try and overwrite the css for the plugin.
#ai20 h3{ font-weight:bold!important; }
also ive added this just to make sure and still nothing.
.statistics h3 { font-weight:bold!important; }
i have no clue why its not updating the css if anyone can give me a have i would be much appreciated.
The new rule you wrote has not been applied, as you can see in the screenshot you posted, so check the CSS file you added it to and make sure:
That CSS file is linked correctly
The style is not nested in some other rule
The CSS file is not cached (hard refresh)
You can use a custom CSS plugin, a child theme or simple add you overwriting rule to the end of your main CSS file within the editor in Wordpress.
Also, the ID will take precedence over the class, even if the class comes after it. Why are you trying to override with the same property/value?
Once the rule is being correctly applied, this will work fine:
.statistics h3 { font-weight:bold }
Use the plugin https://nl.wordpress.org/plugins/simple-custom-css/
it automatically overwrites your current css and adds the new one, I always use it! All you have to do is call the id or class you want to style in the plugin and style it as you normally would.
How to make layout with fixed sized column in Liferay?
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
May be there are matching styles in aui.css already and I can just use them somehow?
What is better: to embed style into .tpl file or use CSS files?
FINALLY
I just redefined styles for columns by id in my theme:
.columns-3 #column-1 {
width: auto;
}
.columns-3 #column-2 {
width: 840px;
}
.columns-3 #column-3 {
width: auto;
}
How to make layout with fixed sized column in Liferay?
You can use inline styles to fix the width of the columns within the .tpl file. Crude but works :-)
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
I don't think you can have CSS files in a Layout. CSS files can go in theme. You can modify the .tpl with your custom CSS classes which will be present in your theme's CSS.
May be there are matching styles in aui.css already and I can just use them somehow?
I don't think there are styles having fixed width which you can use and also this theme seems to be automatically generated when using AUI javascripts (as mentioned in this post).
What is better: to embed style into .tpl file or use CSS files?
CSS files are always better since it gives you a lot of flexibility in changing the styles through different themes. So your layout would be dynamic based on the theme applied. Since styling basically is the job of the theme.
As per your requirement you should create the layout with plugins sdk layouts, and that is more flexible.
If you feel to apply the CSS then you have to apply classes to the .tpl file and its respective CSS should be added to the theme custom.css file.
Just of curiosity, what type of fixed layouts are you creating.?