Make Tesseract theme header fixed for all pages - css

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

Related

Wordpress page complete text gets underlined when page is hovered

I'm creating a website for myself in WordPress using Elementor free plugin and Phlox theme. I've just started and completed a couple of sections. Each section has some text, buttons and some images. The issue I'm facing here right now is that when I open the website and move my mouse pointer inside the Webpage area, the text in all sections gets underlined just like any hyperlink but there is no hyperlink with any text. I've checked settings in customizations and other stuff in theme settings but nothing helped. I'm new on WordPress and don't know how to debug this in any technical depth. Please have a look and tell me how can I fix this issue.
I can't continue with these underlined text appearing all over my page.
Link : myWebPage
Any help is appreciated.
Try this:
.csstransitions .aux-page-show-circle.aux-page-animation-done #inner-body, .csstransitions .aux-page-show-circle.aux-page-animation-done {
height: auto;
overflow: visible;
text-decoration: none;
}
Always attempt to use your browser dev tools to check these things. In your css you have this in your custom.css file. Dont know why its there but thats the cause
body:hover {
text-decoration: underline;
}

How to change button background and text color under every post

How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More

How to add background image to Wordpress theme's Accelerate

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

Editing CSS of WordPress theme that has been embedded

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

Clean Retina Theme #Wordpress, How do I delete the header and footer background pattern?

In the theme options it says that in order to show my back ground in the header and footer that I need to add my own CSS which basically ignores,or prioritizes my background (which is already displayed in the "content part" or middle of the website) over there default pattern. I have very basic coding skills. Any help is appreciated. (Note: I'm not trying to change the color, I want to ignore the default pattern background and I want my background to display across the whole website) Nutivet.com
Go to style.css in your theme folder and at line 453 you will find the css for "branding" this is the id for your header:
#branding{
background: url("images/header-bg.jpg");
....
}
Change it to your pattern.
Or change it to none:
background: none;
The id for your footer is colophon.

Resources