wordpress theme's css customization - css

We use modernize theme for our website.
I want to increase the size of main content area. I just want the background image (gray lines) to take mush less space.
I have tried changing theme's own css file & custom css file both. But it's not working.
pls see the website : www.gtctrust.com
or the picture below:
image

Don't use !important as someone just suggested. Just strenghten your selector here from:
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}
to
body .container-wrapper, body .body-wrapper .all-container-wrapper.boxed-layout{
width: 1060px;
}

see if this works for you
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}

Related

How can I reduce a WordPress footer

I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}

Define header height

I must modify the height of this heading, the white part as seen in the photo:
https://www.girodolares.cl/
check image
It is a wordpress template and I know it measures 1263x102, but I cannot find the path to modify it. Can you guide me how to find it? Which file to modify?
I have tried some CSS code but it did not work.
Thank you.
You can change the height with this selector:
.main-header-area {
background: #fff;
height: 150px; /* or what ever height you need */
}
It looks like it's in .../wp-content/themes/viktor/style.css line #2060

How do I change youtube embed video player size in Wordpress?

I want to adjust size of embed youtube video in Wordpress, but it goes full width (Wordpress blog page).
I want e.g. 60% of page. How do I change it?
This worked best for me:
iframe {
max-width: 50% !important;
max-height: 50% !important;
}
No black framing pillars or weird sizing.
You need to change the css style of your theme.
My suggestion:
1)inspect the page of blog and discover what tag the video is child.
2) Go to the de css style page and put the follow code with the tag of your blog:
#blog-id .iframe {
width: 60%!important;
}
Try this (tested):
iframe {
width: 40% !important;
height: 40% !important;
}
This will affect all iframe elements on your website. Add the above CSS in the theme customiser on WordPress.
Code below works better.
iframe {
width: 896px !important;
height: 504px !important;
}
if you are using a plugin then it must have some kind of dimension options there. But if you are not using any plugin then use might have to use custom css. But you might not able to use iframe within wordpress as it allows only http not https inside i frame.

css in head not accounted for

I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.

Can't change body background using CSS

I cant change my body background and background color with
For example:
body { background-color:#0c0; }
And
body { background-image:url(../images/bg/stone.png); }
Pleas help !
Possible reasons of not working:
You haven't linked your stylesheet
Your image would not be in the same path.
Your image's extension would be different.
Your hash or hexadecimal color code is wrong.
Your path to image is wrong.
Here is a working fiddle proving that it does work though the background of the body is a funny one as sometimes it calls it if you are calling it off the internet and sometimes it won't so make sure you have the image in a directory called images and the call it like this:
body {background: url('images/yourimage.jpg');}
and to add the color add your color like this:
body {background: red url('images/yourimage.jpg');}
Here is a working fiddle: http://jsfiddle.net/Hive7/xmj7C/
It uses this css:
body {
background: red url('http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg') no-repeat;
background-size: 500px 500px;
}
Make sure your file that your are calling it from is in the same directory as the one with the directory images

Resources