I would like to know how to create a custom background.
There is currently an active site, that i am trying to figure out how i can do the same or similar
https://suscopts.org/
enter image description here
Well, I'm not sure if you want to know how to create such a background pattern or don't know how to set the background of a wordpress website.
This seems like a repeated background pattern. Searching for something like "seemless pattern" could help. This images are small and repeated, so you don't need to load a big background image.
In the CSS you can use 'background-image' and 'background-repeat' on the body element.
You can use right click in your browser to select inspector to inspect the website. You should find the element wich has the css set for the background image. Start with the html tag and work your way inside, followed by body, div id page, etc, what ever this page structure looks like. You then have the element you need to target in your css file to give it the background attribute. The CSS file of a wordpress site is found in the Themes folder and is called style.css
Hope this gives you a start.
If you want to clearify your question I am happy to give you a more detailed answer.
Related
I am currently using a squarespace template and am wondering how to inject a code that causes a rollover state change on my logo. All I want it to do is change to the neon green color that is a part of my theme when hovering over. The link to my website is www.henrykernsart.com
I have tried looking for a solution via squarespace and no one has helped me so far.
This can be accomplished using custom css. But, because squarespace templates tend to vary quite a bit, you will probably have to do a little research to figure it out.
There are a variety of ways to inject custom css into your squarespace site. I'll illustrate 2 of them.
Affecting your entire site - In your squarespace admin dashboard, go to Design -> Custom CSS. This will open a side panel with a large text box where you can enter css code.
Affecting just a single page - Open the page you want to be affected. In the hierarchy panel of pages, hover over your page and you will see the gear icon. Click on that to open the settings panel for the entire page. Click on the Advanced tab and this will open a text box for css code.
The code you will enter will be the same in either place, with a small modification for the single page option.
You will need to know what your template calls your logo. If you are lucky, your logo image will have it's own consistent id or unique class. (Looking at your site, you aren't lucky and yours doesn't.) We can use that id or class to directly affect the image.
Let's say your image class was "Header-branding-logo" (that's what mine is). Your code will look like this:
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
That's if you are editing the css for the entire site. If you are doing page-specific editing in the advance tab you have to enclose it in <style></style>:
<style>
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
</style>
If your logo has an id instead of a class, you can do the same, but instead of the class, you will use #id:
#block-a-bunch-of-id-numbers:hover{ ... }
If you aren't lucky enough to have your logo id'd, you will need to use a combination of Attribute Selectors and Complex Selectors.
First, find a valid, constant id or class. BTW, this is an id that does not start with "yui-" or "block_yui-". Don't use ids that start with those.
On your website's template, you have a class called "logo-image". That's probably a good place to start. Starting from there you 'describe' the path to your image.
.logo-image > a > img:hover{ ... }
Inside the <div> (marked with the 'logo-image' class) is an <a> and inside the <a> is your <img>. So that's the path.
How do you get that path? The easiest way for me is in chrome, right click on the logo image and choose "Inspect". That will open the inspector from which you can examine your site's structure.
If you can't find a good class or id, you have the option of using an Attribute Selector. Find a block somewhere above your image with a unique attribute. Something like
data-content-field="site-title"
You can use that attribute as your anchor point.
[data-content-field="site-title"] > div > a > img:hover { ... }
Lots of ways to accomplish the task. It's kind of fun to figure out. (Remember, stay away from those "yui-" ids!)
What actually happens when you hover the image is it swaps out the current code/image with new code/different image. That being said, in the css you need to specify the replacement. If the logo is a static image, I would recommend creating the logo using the hover color (in this case - neon green). Then set the hover event property to swap the default logo image with the hover image.
This link may help you with the :hover event property: w3schools - CSS :hover selector
I can't figure out this issue and I have tried looking this up and it is hard to find any one with this scenario. I am using a master page with two content pages. The first content page is default.aspx, of course. The master page has a png that is a banner. This has a rule that makes it responsive in a separate CSS file. This works fine.
For the first content page, I have three buttons that are styled using CSS ( they are custom buttons I made in a vector graphics program that change appearance when they are pressed, all using CSS ) and they are responsive. There is also a listbox that is styled and responsive with CSS.
The layout of the default page is like this: Two div containers: one that floats left and one that floats right. CSS is used to make these containers responsive. In the right div, I have my buttons and they are enclosed in their own divs. So .. and so on. Of course, the listbox is handled the same way with a div that encloses that as well.
Moving on to the second page, I have the same basic structure as the default page. My intention is to have in the right div an image, followed by a text box, then an image, and a text box. The left div will contain the same content that the default page has.
At this point, I have added to the second content page the list box and the CSS is working as expected. The list box looks just like it did on the default page and is responsive as well. So the CSS is working. For the first image, I need a new CSS rule. So I go to my CSS rule and add a new rule .image{ width: 100%; height: auto; } and then I add my image and set it up with the class reference and the image. It does not work. This image is in it's own div. If I change the class of the image to another class that was created previously, the image is responsive. So I can use the banner CSS rule and the image is responsive, I can use the button CSS rules and the image is responsive, it behaves like a button ( clicking on it makes it change its appearance, that kind of thing ), I can even add the rules for the list box and the image is responsive. If I then go back and try to use the rule for image, it doesn't work anymore.
Any ideas on what is going on. It is not making any sense what so ever. I added the rule to the CSS file just like I did with all the other rules but for some reason, this rule is not working at all.
Thank you guys for any help. I can post code if you guys need it, but I don't see how that would help. My image for the second content page is identical to how I did the banner and the rules for the banner and the image are virtually identical, except percentages are different. This is just super weird.
To improve the performance, browsers save the css files in their cache and use their cache. If they don't do that, the browser has to keep loading the css file every time a page is using the css file.
If you clear your browser cache, you will notice that the new style gets applied.
If you are developing commercial software, you probably don't want to tell every user to clear their browser cache and you prefer to force the browser to load the new css file. On the other hand, once the css is loaded you would like the browser to cache it, because it will improve the performance.
There is a trick to achieve that!
Let's say your style file is called mystyle.css and you have a link to the style file in your web site like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css">
To force the browser to load the file again, you need to change link and the standard practice is to use a parameter in the url (usually a version number).
like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css?version=1.00">
Your style file is going to ignore that version parameter but the browser will notice a change in the link and will load the new style file. Basically, the browser stores the link to the file and if you change the version number, since the link does not match with what your browser has in its cache, it will force the browser to load the file again.
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
I cannot get hyperlinks to show up as an overlay (or watermark) in front of an image, as they should. Instead, I believe something is being overwritten by my WordPress theme's CSS, leaving plain HTML hyperlinks below the image.
Here is what my page looks like:
But here's what it's supposed to look like:
Here is what Chrome Inspect Element is telling me (Full image):
Here is what Firebug is telling me (Full image):
Unfortunately, I'm clueless with CSS. I believe my WordPress default theme is overriding some important settings, but I'm unsure what/how to adjust things. I can simply add !important clauses to things in my custom CSS, but I'm unsure as to what to put or how to put it.
Here is the stylesheet associated with my website, and here is a website that has the exact same thing I have, except it's functioning properly.
Any guidance in this regard would be greatly appreciated!
I'm really new in this so, maybe you can help me!
I'm trying to change a background of this css, but I could not. Help me please!
P.s I just copy an example of other web page, so don't be extrange if you see something wrong please. (if you can't see the web page, maybe you should take a look over here https://www.charitywater.org/donate/#step-1) Just want to change the first big background and the last big background.
The css code:
When you say "first big background", I am assuming you mean the people in the background. If so, go into your style sheet (https://d555kv4p2mtwa.cloudfront.net/_site/styles/stylesheets/microsites/donate.css?v=10)
and modify the background property for .form-general{}
I was able to detect that image right away with Developer Tools for Google Chrome.