I want to create a menu using CSS, and i want to differentiate when a parent has a child theme present that it shows a custom picture (i.e. an arrow of some form) to show this.
I know that this can be done via a suckerfish or superfish menu, however this is something that i haven't got my head round yet.
Can this be done in CSS by specifying an indicator when child theme present?
Related
I am using a theme for my wordpress website called simple ,I created a main_navigation which first links to a page and then it has sub menu elements which link to the individual parts of the static page.
All these parts of the menu are in perfect shape they link to the corresponding page and everything works fine.The problem i am facing is when i try to change the drop down menu's background and mobile menu's background transparent.
so i used the main word press customizing option to change these menu to transparent and even tried hard code the css , but they did not work.
there is an issue with the theme simple , so to achieve transparent drop down only the values in the wordpress main customization should be tinkered with.
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
Where do I edit the white space? Or in other words, where can I add more spacing/remove white spacing? It seems way too big for the website when I scroll down
Your theme probably has some CSS code that styles that part of the theme. It is usually in the file style.css, however it depends on the theme.
If there are no options in the theme's panel, there are two options (both require CSS code):
You can add your CSS rules through the administrator panel in Appearance > Edit CSS.
Or you can write a child theme and add some css rules that define the spacing in that part.
Primefaces 3.5.10
If I am using ThemeRoller generated themes, I found that not all components are styled correctly. E.g. <p:tabView> and <p:menuBar>. If I use tabView in a dialog, all tabs content are shown on one page. If I switch to any tab, then the content for every tab will be shown properly, not more as one big page with all tabs content.
If I use icons in menuBar all icons are shown on top in one place.
I've tried many themes from Themeroller but the result is always the same. Do you know some CSS hacks to correct this behaviour ? Or what can I do in this situation?
I want to create a horizontal custom menu in wordpress. I've added a custom menu widget to the footer of my site (not online yet) but it displays a vertical bullet list menu. Where can I change that?
I'm using latest wordpress and the Interio theme if that helps any.
I don't know how to edit CSS for custom menu widgets. How do I do this?
You can edit the CSS for any widget in your theme's style.css file. Using your development tool of choice (Chrome dev tools or Firebug), inspect the menu widget (the vertical bullet list menu) and see if you can identify any unique but consistent selectors for that menu. Those will be the selectors you'll use to target this menu and style to your liking.
Have fun!
I solved this problem by using this dropdown menu widget which can also be set to create horizontal menu's :)