Not sure if this is the right place to ask, but I’ve had no luck elsewhere and have often managed to find answers to stuff before, by looking at other people’s questions and answers on this site.
I’ve recently installed a WordPress plug-in (WP Subtitle) that allows me to assign a subtitle to posts and pages. Got a couple of problems though:
The following line is what displays the title of my blog posts as links in the Sidebar:
<?php get_the_title() ? the_title() : the_ID(); ?>
I’ve amended it so the subtitle is displayed as well:
<?php get_the_title() ? the_title()+the_subtitle('<span class="subtitle">', '</span class="subtitle">') : the_ID(); ?>
The links themselves, work fine – but if the mouse only hovers over the title, only the title is highlighted, whereas if the mouse hovers over the subtitle, both the title and subtitle are highlighted (which is what I actually want). Does anybody know how I can achieve this please? For the title and subtitle to be highlighted regardless of which part of the link the user clicks on?
The second problem is that the code only seems to work for my posts, and doesn’t display the subtitle for my pages at all. (This is only in the Sidebar though – the individual pages and posts both display the title and subtitle fine).
If you need to see what I mean, my site is http://www.retelevise.com. Any help or suggestions would be really appreciated.
Thanks,
SN.
What's Going On
The issue here is that you are adding a layer of HTML inside the a, in the form of a span. Your CSS :hover rule only applies to itself, not to children. So when you hover over content directly inside the a, only content directly inside the a is highlighted. You can go two routes. The first involves removing the extra span, which you need to keep to change the color.
The second method is quite simple though, and just involves one extra line of code. We just need to add another selector to tell the browser to highlight all child spans as well as the as themselves. Your current :hover selector is .post-excerpt-title a:hover. We just need to add in .post-excerpt-title a:hover span, and it'll work perfectly.
Code
Current CSS: (Minus the comments)
.post-excerpt-title a:hover {
color: #F29B06;
font-weight: bold;
}
New CSS:
.post-excerpt-title a:hover, .post-excerpt-title a:hover span {
color: #F29B06;
font-weight: bold;
}
Screenshot
Related
Hi there i was wondering if anyone could help me ?
I have an issue with CSS navigation dropdown that i have previous implemented in to designs but for this design the dropdown menu appears and are sometimes able to hover over the links but then sometimes it takes 5+ tries before you are able to hover over the links again abit hit and miss.
I have provided a link to the menu and also my code below its possible ive missed something so simple but any help or advice would be greatly appreciated.
Link: Design / Menu
Code: CSS Code
Im unsure how to input the css code in to my post so i have linked above.
thanks in advance
Chris.
The problem is the space between the opener and the menu.
You can easily solve this removing the space (that is a margin) like this:
#nav ul {
margin-top: 0;
}
Or, if you want to mantain the space, replacing the margin with padding, like this:
#nav ul {
margin-top: 0;
padding-top: .6em;
}
The padding will allow the menu to stay open.
Hope it helps. Good luck.
I have two questions im sure are very simple I'm just looking over something.
1.) To start off, my website is mostly HTML, except I have a WordPress blog page. To make the blog page look like the HTML home page, I modified the header.php and footer.php, and everything looks fine except one problem.
As you'll notice if you compare the Home page with the Blog page, for some reason the margins I have to position the navigation links & social media icons isn't working but it works on the home page? I really have no idea why it isn't working, the stylesheet is linked correctly and everything, as every other style works fine except the margin in those areas.
2.) At the bottom of the home page there is a white space below the footer, but its not on the WordPress blog page? I am trying to remove the white space but have had no luck. The only way I can remove it is if I make the footer 30px larger, which I don't want to do. I have set heights on the HTML, Body and am unsure why the space is there.
Thanks ahead of time, I appreciate you taking the time to look at my questions.
EDIT here is a link to the site:
http://jqwebexamples.com/iAM_Talent/Version3-rev/index.html
The <p> Tags in your footer are the problem. If you remove (or disable it temporarily) the following style:
#footer p {
margin-top: 45px;
}
then the white line disappears. Take a look in firebug to check this out.
The other issue looks like caused by the unsorted list in your navigation div.
I'm fairly new to Wordpress/CSS/PHP and I'm having a few issues when designing the company intranet. As a design brief I was asked specifically to use only the primary sidebar as a navigation menu, leading me to remove the main/top menu.
I am currently using the code:
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
header {display: none; !important
}
Within a child theme to successfully hide all headers, unfortunately I've reached a point where I actually need to use the "entry-header" class in the featured content window to show the titles.
I am very happy with all other titles staying hidden as I've done a lot of my styling around this.
Basically, all I'm wanting to do at this point is keep everything else hidden whilst only showing the entry-header on the featured content section. I hope this makes sense! Thank you very much in advance for your help.
Unfortunately the site is hosted internally so I can't provide a link to show what I mean!
There should be a file named header.php
Inside there should be the "top header" where the nav is contained, etc., that you want to hide. It should have an ID or a class along with, if it does not, give it one. For example...
<header>
Could be edited to be...
<header id="top-header"> or <header class="top-header">
Then, in your CSS, change...
header {display: none !important; }
To this if you are using an ID...
header#top-header { /*code*/ }
OR this if you are using a class...
header.top-header { /*code */ }
The above is the more "proper" way of hiding those items, although in the interest of site speed, if you arent using those headers at all, simply delete them from header.php. (be careful of any wrapping div's that end in footer.php")
Off the top of my head, the 2014 theme has an ID attached to the top element already that you can re-use.
Alternatively, you could just "undo" the styling for the entry-header... Though at this point it would be considered bad practice. To do this... Right beneath the header line you already have in your css, add this:
header.entry-header { display: inline !important; }
Make sure that the above code is directly AFTER the code you are using to hide all headers. It will not work if it is above.
Again, i caution you however, that this is not best practice. Hiding all headers, then unhiding the ones you want isn't the best way to code. This would be called an exception, and you are forcing yourself into writing potentially multiple exceptions any time you run across an instance where you want to see .
Also, simply setting them to display: none; does not mean they are REMOVED from the page. Only hidden from view to users. Google bot will still see and read any content inside those hidden elements. This could potentially be very bad for your SEO.
If you want the .entry-header to be visible on only the featured content page, you'll have to use a conditional statement in the featured page template to enable the header to be displayed on that page alone.
Okay, I believe this one will be a hard one... I would search the internet first, but I can't put the question correctly, I only have images and wild guesses as to how it is done. Maybe you will find it interesting too, maybe it is a piece of cake for you... So here we go:
I believe you (maybe) are familiar with Russia's and Ukraine's social network called VKontake.
It's like Facebook, well, the idea was taken from Facebook.
So, notice the scrollbar and how much space there is. When I click on the underlined this opens:
See how the scrollbar changed, and you can only scroll the content of the "wrapper div".
But, the background is still the vk.com/idmyidnumber, that means no redirection occurred, it only added ?w=wall57371848_7204
So the question is as follows:
How to "print out" a div that appears on the current scroll position, and is scrollable like on the image.
If you are interested, I can supply you with the code. If it's easy as 1 2 3, please answer :)
The trick is that popup appears to be a child of an element, which has "posision: fixed" style and its width and height are equal to window's.
This fixed element contains another element which has more height (and which contains modal's data), therefore fixed element shows scroll.
Fixed element's scroll overrides body's scroll.
I believe you want a modal window. There's a great tutorial on how to create one here:
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Also the overflow element of the DIV tag will define the scrolling capability for the div that is brought up in the modal window itself. That's a CSS thing and is better covered here:
http://css-tricks.com/almanac/properties/o/overflow/
Hope that helps!
You need to provide your top level modal div with CSS:
text-align: center;
vertical-align: middle;
position: fixed;
width: 100vw;
height: 100vh;
The position: fixed; fixes its location against the browser.
For a current project I'm doing I'm using PHP includes for my nav bar to save time when making changes to it. The nav bar is composed of a CSS sprite, which currently caters for the default background image for the anchor tags and the a:hover states. In this case having the same nav bar included on every page via the PHP include obviously works fine as neither of these states need to be conditional to any of the pages.
However, what I want to be able to do is to have a different section of the sprite visible depending on what page the user is currently visiting - just to show them what page they are on.
Without doing a PHP include I could have a different ID or class for each page (i.e. "page1Current") and just change the CSS accordingly. However, using the PHP include method I can't seem to work out a way to get around this.
I'm guessing that, using a bit more PHP, it would be possible to use some sort of IF statement to get the page address and use that to conditionally alter the CSS accordingly. Unfortunately I'm a total PHP beginner so I can't quite get my head around it.
I've not posted any code as I'm just looking to get the right idea, but if it helps I can post some.
Any help would be appreciated :)
Rich
You don´t need more php, you can set a class or id to every page on the body tag and give all your links a separate class as well.
If for example the id of your contact page is contact and the class of the contact link in the navigation menu is contact you can style that button on just that page using:
#contact .contact {
// highlight button
}
Why not include some a style tag in the html rendered by the include that changes whatever css attribute you want for your bar, ie :
<style type="text/css">#menu .navbar { background-position: 0 0 }</style>
in include #1 and
<style type="text/css">#menu .navbar { background-position: 50px 0 }</style>
in include #2