Hi I am building this site at http://amy-and-duncan-are-getting-married.co.uk/, using the Aggregate theme on WordPress.
The problem I am having is the background on certain pages does not fill the whole screen and I am left with a blank white area, when in Chrome if I go right click and inspect element I can get the CSS for the image and add the code I want,
'background-size : cover;'
I have tried researching this but I have read that WordPress automatically creates this CSS, surely there must be somewhere I can go and edit this code.
Can someone kindly give me a hint or clue cause I feel I am tearing my hair out.
Thanks
Craig
Log in to the back-end of your WP site
websiteurl/wp-admin
Then on the left side bar, go to:
> Appearance
> Editor
Then look for the stylesheets on the right, under:
> Styles
Then CTRL + F the code you need to change, for instance:
#content-area
then add to this selector:
background-size: cover;
Then click Update File.
Hope this helps.
Use inline style like
<div id="content-area" style="background-size: cover;">
Or add an external style sheet in your wordpress theme and define content-area id like
#content-area{
background-size:cover !important;
}
I think this will work for you
Related
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I'm constructing a website using the Tesseract theme by Tyler Moore. I want to make the header fixed and 80% opaque for every page of the website. The header for the home page has a slider for transparency under customization and I managed to make it fixed by changing its position by editing the site-banner css file in cpanel. My question is, how can I apply the same setting to all the other pages of my website? Thank you in advance!
On the wordpress dashbord, hover on the appearance tab, then click on editor. On the right, select stylesheet. Then paste this code at the end of the stylesheet.
#masthead_TesseractTheme {
position: fixed;
margin:auto;
z-index:100000;
opacity: 0.8;
}
Then click Update file.
Click here the see the Procedure on how to locate and edit the stylesheet
Hi guys i've been working for this for days and searching the net for help but unluckily I don't find one. Here's my problem, I know that wordpress has a built-in background image when you click the appearance. I also tried editing in the CSS but when I put the code
background-image: url(image/3.jpg) in the body but when I see it it didn't appear. I think that the theme Accelerate has a code that has a fixed white image, How is this?
Their may be background image or no back ground image in wordpress according to the theme you are currently working with. Anyway you can add background image inside the body of a page in wordpress by the following ways :
Select css class from "main.css" located wp-contents/themes/your-current-theme/css/main.css, inside css edit "body" as
body{
/*...propeties..*/
background-image:url(back-img-url);
}
if it overridden by default images of your theme can use this instead of above
body{
/*...propeties..*/
background-image:url(back-img-url) !important;
}
In case you are using a custom template inside wordpress find the body class from the css you are using and change this as above.or using image inside page with img tag then make direct changes for this.
I resolved this by clicking Theme Options -> Design and choose the "Boxed Layout" instead of Wide Layout
So I'm running a social network site, in which I've installed plugins and modules that allow users to edit their fan pages by having their own CSS editor ( a style box ) This is for Social engine.
I originally had a main menu that had images for links but were referenced via html src vs css
i.e <img src=""> vs .div { code } in order to allow users to alter the layout via CSS I created classes for each image so that they could be overwritten.
For this I stumbled across an article ( I don't have the link ) on stackoverflow bringing up how to change an image using CSS which lead me to the <img class=""/> and using
.customtag {
content:url("http://pathtoimage"); }
in order to modify it.
It shows up GREAT in chrome and IE, but in Firefox it is simply not registering and all I see is the text + the description for the alt="" tags.
I've been searching for a few hours but unable to find an exact match to this. So I'm posting this here to see if anyone could lead me in the correct direction. I've also tried declaring the !DOCTYPE as well as using <style> vs <style type="text/css">
While using the css validator shows other areas, nothing related to the current lines of code as to why its not rendering. In firebug it doesn't even show the CSS registering at all it seems.
Any help is greatly appreciated.
http://fmlstudios.com/testdesign/
I've removed the menu code from my site and put it into a separate html file in the link above as to single out my issue. Any help is greatly appreciate and or pointing me in the correct direction. Thank you for taking the time to read.
Since Firefox doesn't understand or comprehend the content: url(); fully as it expects an image from the <img class=""/> you'll need to utilize background: url(); instead as this is accepted in all browsers.
I.e.
.someimageclass { background: url(pathtoimage); }
`
This will cause firefox to load a an image but it will have a black border box around it due to the fact it's looking for the original image specificed in <img class=""/>"
To make a workaround create or google a "blank.gif" 1x by 1px and edit the img class to
<img class="someimageclass" alt="" src="blank.gif"/>
Now the box will dissapear and this will be your workaround.
Hope this helps anyone else out there that's been going nuts over this.