Here's a piece of my navigation code:
<? if($page == ""){ ?>
<li>
Home
</li>
<? }else{ ?>
<li>
Home
</li>
<? } ?>
I want that #on to include 3 images basically:
With repeat-x. (Which is actually the #on)
Left side of the nav button.
Right side of the nav button.
I tried some solutions I found online, although none seem to work.
Is there a way to do it without wrapping each nav with 2 additional div tags?
Thanks!
There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.
You would do it like so:background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
There's some more information on that here, but as a heads-up, it's a CSS3 property only.
I think what you want are CSS Sliding Doors.
Related
I have a blog page that includes an archive.
To display the archive I have used:
<div class="archive-title">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' );?>
</div>
I have created a sidebar with
<div id="sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('blog-sidebar') ) :
endif; ?>
</ul>
</div>
..and added widgets to display the categories and archive links in the sidebar.
The issue is that on the archive posts page the main background of the posts is white and the sidebar is a dark blue.
I need the colour of the link on the sidebar to be white, but now it just shows an empty bulleted list (because the text is white) above the posts.
I can not change the colour of the .archive-title li a on the main page without changing it on the sidebar as well. I also can not hide it without hiding it on the sidebar.
You can see the issue here:
http://lumency.co/2019/03/
You will notice blank bullet points with no text above the posts.
How do I change the colour above the posts without affecting the colour on the sidebar as well?
Please let me know if you need any other info. Thanks!
It might be helpfull to mention that you are using WordPress...
Do you have access to change css? My advice would then be to add a class to the list under the title .mainlist and use css like this
.mainlist li a { /* change the style of the list under the title*/
color: black;
}
.sidebar li a { /* change the style of the s*/
color: white;
}
note: you are putting li tags into a div tag and it's a mistake. because li tags most only be child of a ul tag.
and for change .archive-title li a colors use below code.
.archive-title > li > a { color: #666666; }
Thanks for all the suggestions!
I added an in my sidebar which helped me style it.
I also removed the from my archive page, which was what was actually causing all the issues because I had no idea why it was adding a list there making me unable to style it. Haha, ooops!
<ul id="verticalmenu">
<li>Home</li>
<li>Vertical Menu</li>
<li>Drop Down Menu</li>
<li>Fading Banner</li>
<li>Web Design Blog</li>
</ul>
If this is my menu.php, how can I call it on other pages? I want it to be static or say fixed.
It should be present in every page, I navigate to.
http://oi57.tinypic.com/2j0nq5i.jpg
How can I do so, just like the red block in the img??
I would suggest making a header.php file that contains the full header of your site, including the menu. Once you have done that, you can just call include("header.php"); on every page and your entire header will be brought in. This will also allow you to make one change in one file and affect the entire site.
To position the menu on the left or right, you are going to want to wrap the menu with a css call similar to float: left; or float: right; jsfiddlee: http://jsfiddle.net/jjS98/
here is the css code for floating your menu to the right:
#verticalmenu{
float:right;
}
You can change right to left for the desired results.
I have been reading around about how to make the navigation link stay active, when inside a post[ single page ]. I haven't found any solutions so i created a mix of jquery and php, But i don't think this is the right way dough it work.
So I was thinking of how to optimize the code much more. Any ides ?
<?php
if (in_category('news')){ ?>
<script>
$(".menu-item-46 a").css("border-bottom","#000 5px solid");
$(".menu-item-46 a").css("padding-bottom","11px");
</script>
<?php }elseif (in_category('network')){ ?>
<script>
$(".menu-item-47 a").css("border-bottom","#000 5px solid");
$(".menu-item-47 a").css("padding-bottom","11px");
</script>
<?php } ?>
One way to tackle the problem is to take advantage of CSS.
Have a class called "active", and append this to the parent element holding the menu you wish to show.
Example:
<div class="active">
<div class="menu-item-46"><a>My Nav</a></div>
</div>
Then in your css file:
.active .menu-item-46{
border-bottom:#000 5px solid;
padding-bottom:11px;
}
Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"
I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/
We had a bad experience with a developer not sticking to timelines and what-not so we had to drop them. That being said, we're completing the site on our own and only have a few items left. One of which is a JQuery based navigation toggle that he made... it works fine for the main level of items but when you get into sub menu items, it stops using the appropriate CSS. I'm thinking this is a basic "add this to CSS" answer, but I'm not versed in CSS well enough to figure it out.
The CSS and what I think is the JS calling it can be seen here: http://jsfiddle.net/C8vwJ/
The issue can be seen here: http://74.124.14.50/connecting-point/outreach/ (note the + "toggle open" graphic on the sub-item beneath "Outreach" is on the "Y" of "BeYond"... so it's not being CSS'd to the right as it should be.
Any ideas? Thanks for looking.
Add this line into your CSS file.
.widget-area .current_page_item .page_item .toggle { right: 0; }
Trouble in these lines of css code - style.css line 1291:
.widget-area .current-menu-item .toggle, .widget-area .current_page_item .toggle {
right: 10em;
}
If I try to change this value both '+' link and '-' link moving. Try to brake these properties. I tried to do
<div class="toggle" style="right: 0pt;"></div>
(this can be applied by classname, not inline css)