Can you please assist me with adding an indicator or Overlay on a Wordpress Website.
The website is https://www.thearcadestick.com
I need for the pagination at the bottom of the page to identify what current page the user is on.
This is the Custom CSS code I tried adding to the Wordpress site, but it didn't work:
span.page-numbers.current {
background-color: black;
color: white;
}
I did adjust the values to try different colors.
Thank you for your help.
try adding !important tag, I tried on your site it works.
span.page-numbers.current {
color: #cb2027 !important;
background: #000 !important;
}
Related
I am trying to change the background on the Blog page of my website. The current website is all black backgrounds, but I would like the Blog page to be white with black text. I need to have my own CSS as Squarespace does not support this as a custom setting.
I have already tried codes provided for things like this, but nothing has worked. For instance: https://answers.squarespace.com/questions/14800/how-can-i-change-the-content-background-color-on-only-one-page-using-css.html
#main { background-color: #ffffff; }
I would like the background color to change.
You may target the blog specifically via its collection ID, which Squarespace adds as a class for you, on the body element. From there, we must target the div that is its immediate child, .overflow-wrapper.
Insert the following CSS via the CSS Editor:
.collection-5d0a3c81de1f2b00012ccccc .overflow-wrapper {
background-color: white;
}
Because the text is white, it will appear invisible. You should be able to adjust the titles and other meta-information (author, date, tags, categories, etc.) using the Style Editor.
However, I don't believe the style editor will give you an option to alter the body text (p elements) on the blog separately from the rest of the site. Therefore you may also find the following CSS helpful for changing body text on blog pages to black:
.collection-5d0a3c81de1f2b00012ccccc p {
color: black;
}
In addition, you may need to add some CSS to address the header, which as a result of setting a white background will be unreadable.
.collection-5d0a3c81de1f2b00012ccccc.site-spacing-small .site-header, .site-spacing-small .site-page, .site-spacing-small .site-footer {
margin-top: 0;
margin-bottom: 0;
padding-top: 3vw;
padding-bottom: 3vw;
}
.collection-5d0a3c81de1f2b00012ccccc #header {
background-color: black;
}
And finally, the page title should also be set to black:
.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
color: black;
}
I'm looking for a way to remove the border around the event picture and event title on my main Page ( ofen49ers.de ).
Adding a custom class to the section and changing the border value to 0 dosen't seem to work. Maybe someone has an idea to remove the border.
Here the CSS I used:
.custom-class-event-front {
border: 0px !important;
}
You can try this
.fusion-events-shortcode .fusion-events-thumbnail, .fusion-events-shortcode .fusion-layout-column .fusion-column-wrapper {
border-width: 0!important;
}
<style>
.post-content .fusion-column-wrapper,
.fusion-events-thumbnail.hover-type-none
{
border: none !important;
}
</style>
This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)
The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.
I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.
You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).
button[type=submit]:focus {
border: 2px solid #63C1FF !important;
background: #ffffff !important;
color: #63C1FF !important;
}
button[type=submit]:active {
border: 2px solid #ffffff !important;
background: #63C1FF !important;
color: #ffffff !important;
}
Thanks, any insights appreciated!
Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8
has an opacity setting on hover:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
color: #fff;
opacity: .9;
}
How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
opacity: 1 !important;
}
would work, or a slightly better approach such
button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
opacity: 1;
}
would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.
i have the following website
http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/
and I'm trying to change the header menu color. I have previously changed the colour for the menu items themselves from code that someone provided here and it was very helpful however no matter what I do I can't change that dirty blue color to something nicer.
I have tried various types of code:
top-header {
background-color: white;
}
header {
background-color: white;
}
.sf-menu {
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #ffffff !important;
}
It you visit the actual stylesheet that's doing the overriding, you'll see that it's a custom stylesheet that's being generated by theme options. It doesn't even exist on the server as an actual .css file. It's also the last styles being called on the page.
Rather than editing a different CSS stylesheet and using !important to override this, you're better off updating it (or even removing this, if possible) from the WP Admin theme options.
Also, as mentioned by the (now deleted?) other answer, you need to make sure you're prefixing the .top-header class with a .. Your question doesn't currently show this.
I am looking to customize navigation bar on my wordpress site to have a Surrounding colour for a 'Get a demo' Menu, you can have a look at website in the below link
https://www.punchtab.com/
How can i achieve the same in my WordPress site?
Any help with this would be greatly appreciated!
Gareth
You can do this by adding background-color: #DC286D; to the header-login-nav in the css.
#header-login-nav
{
padding-right: 10px;
padding-left: 10px;
background-color: #DC286D;
}
So on your wordpress site, you would need to change it on the navigation class/id (it would depend on your theme).
EDIT:
#menu-main-menu
{
background-color: #000 !important;
}