Define header height - css

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

Related

Change search bar background color in wordpress

I just want to change the background color of the search bar. It's possible? I just add an attachment so you can see it clearly. The web link is: https://www.formanet.info/. I'm so frustrated with this. Thank you!
Image: https://www.dropbox.com/s/jyp9vzn42be3szu/Captura%20de%20Pantalla%202020-08-28%20a%20la%28s%29%2012.53.54%20a.%C2%A0m..png?dl=0
You already have the class (.field_search) so give it a background-color and force it to be applied by using !important.
input.field_search {
background-color: #b9c4ce !important;
}
You can change your CSS file - /universe_theme/core/css/colors/blue.css
Line number 44 -
.search-form form input {
background-color: #004074;
}

How to change the default width (180px) css for the class of `.mat-form-field-infix` in angular-material 8?

I am using angular-material 8, I need to reduce the default width (180px) of the .mat-form-field-infix, but am unable to change that css?
This is the by default-size of the .mat-form-field-infix:default-size field
I need like this filed exact with the text.I need exact like this
stackblitz example reference link, i need to reduce the size of the select field width.
How can I do that changes, can anyone help me?
in style.css add
.mat-form-field-infix {
width: 100px !important;
}
stacblitz demo
Why do you need to specifically set .mat-form-field-infix width when you can more easily control width on mat-form-field?:
mat-form-field {
width: 100px;
}

why every image in my wordpress get large? even though the size of the image is small

The size of the image is only 15x15. when i put in in wordpress. it automatically large. i want the default size. every image i put in wodpress is getting larger. even though I dont have any code to make it large.
here is my code:
<img src="http://mainvasdaq.compy.global/wp-content/uploads/2017/12/Square_ble_Right-1.png" style="width"50%;" />
Looks like there is a typo in your inline styling:
<img src="http://mainvasdaq.compy.global/wp-content/uploads/2017/12/Square_ble_Right-1.png" style="width:50%;" />
General format of inline style is as follows:
style="attribute:value"
Be aware of the : between attribute and value in above syntax.
More info could be found in w3c or in MDN
There is css written as
.dt-header-image img {
width: 100%;
}
in your style.css line number 1846.
Please comment that or add below css
.dt-header-image button img {
width: auto !important;
}

wordpress theme's css customization

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;
}

Gantry Framework-Joomla How to edit logo from CSS

I would like to know how can I edit CSS files(ex:Logo size, Logo path)
I am using Grantry v4.1.24 and Joomla 3.3.1
See the example of how to change Logo;
#rt-logo {
background: url("/qatarclean/joomla_gantry/images/logo.png") no-repeat scroll 50% 0 transparent !important;
}
#rt-logo {
height: 140px;
width: 267px;
}
How can I find the CSS location for this and how to edit this?
in Firebug it is only showing the only the folder path.
I have created gantry-custom.css file and inserted above data. It doesn't work.
See the attached picture;
Also I want to know how to remove some lines from selected CSS file;
Thanks in Advance,
Sameera Silva
The Gantry Framework uses compiled LESS files. Rather than editing these directly, it is recommended (as you have done) that a custom CSS or custom LESS file is created so that your changes are not overwritten by a template update.
The use of !important might be the reason your override is not working.
You can get around this using CSS specificity as explained by Henning on the RocketTheme Forums at: http://www.rockettheme.com/forum/configuration-and-security/209832-want-nail-how-2use-template-name-custom-css-file-correctly#1028846
For more information on CSS specificity Henning recommends: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know
In this particular case, the following should fix the issue you are having:
div#rt-logo {
background: url("/qatarclean/joomla-gantry/images/logodf.png") no-repeat scroll 50% 0 transparent !important;
}

Resources