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!
Related
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.
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
I have this little problem. I am trying to fix the style of a website by examining the css using Firebug (in firefox).
The thing is that i can't figure out where this specific style is at because it appears in some
8EdeWkQAAAA%3d%3d">http://localhost:19478/asset.axd?id=kQAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Ucn1bLNl-1Ho4_O-bMlfdbmZV4Xb8fTarGoluNp09DX1UePdn7JKGywyNu6ct_v_pLv_5Lvjz6attzkXXtXvrmkP_d2dvfGe-NPdx7QB1Pq_t6n9-mXjx619Tr_Jf9PAAAA_8EdeWkQAAAA%3d%3d
Obviously this seems to me something that is being created by the DOM?
I am attaching an image. Take a look at it and you will get a better picture of what i am asking here.
Thanks
Here is the image
Is there a way to quickly copy all of the css code of the inspected element in google chrome?
I found that while designing, it's sometimes easier to change the css on-the-fly via inspect to figure out correct pixel distances, rather than changing in the code and refreshing the page.
Does that capability even exists?
thanks to steveax's comment I was able to find the answer, which I will share with you
Once the inspected element has been edited, going to the sources tab and choosing the appropriate CSS where that element is defined, the edited attributes will appear there, which you can copy regularly..
Obviously, a copy straight from the style window would be more comfortable..
I've ported the Wordpress app from wordpress.org to my web site. I've changed the html and the css to conform to my existing design. I've placed the entry data in my 'main' div, which has a left margin of 19em to keep it to the right of my navigation div. This margin appears to be overridden somehow by the generated html within the 'main' div. I've patched some of the elements by adding the margin back to them, but would prefer a cleaner fix. I've looked at the page using Firebug, but I can't identify the appropriate entry. What is overriding my margin setting?
The problem page is here. Notice the Tags at the bottom.
Another page that doesn't use WordPress code doesn't have this problem. It is here.
Thanks for any help
I want to keep my acceptance rate high so I don't appear ungrateful for all the great help on this site. The answer was that the css was defined as a class and the html was using 'id='. Sometimes it helps to make sure the computer is plugged in.