So, I want to make a side menu in WordPress.
It should display:
1) all the first-level links
2) the full "path" to the link that is currently selected
I found out that thanks to the WordPress CSS menu class structure I can emulate the behavior I want to get with this code:
ul#menu-test ul {display:none;}
ul#menu-test li.current-menu-ancestor > ul {display:block;}
ul#menu-test li.current-menu-item > ul {display:block;}
ul#menu-test li.current-menu-item > a {background-color:yellow;}
But I don't want to repeat the whole menu again and just trim it with the CSS, I just want to physically display only the items I really need.
Can I somehow emulate this behavior in PHP? I can pre-fetch the full menu in text format, if that matters.
If i understand correctly the second thing you want to display is something called "breadcrumbs". Here is example solution for that:
PHP Simple dynamic breadcrumb
Also you can google many of other solutions for breadcrumbs if you need.
You can echo your menu with php and then operate on that section with php but still to format it visually you still need css as this is purpose of css. For example:
echo('<ul>');
echo('<li>Home</li>');
echo('<li>News</li>');
echo('<li>Contact</li>');
echo('<li>About</li>');
echo('</ul>');
Let this be just a hint for you how to achieve what you expect.
Related
As you can see here: https://wildlatina.com/my-account/
the white body is not inside the page and there is not margin padding for the login form? what did I do to mess this up? I'm a beginner when it comes to editing with css so please go easy on me. Just would like the account page to look nice.
hi please login to your cpanel or ftp then open your theme style.css
find the css rule below
.full-width-content .container.grid-container {
max-width: 100%;
}
and comment the rule like this
.full-width-content .container.grid-container {
/*max-width: 100%;*/
}
and it will look like this
You have used the Wordpress theme GeneratePress. In that theme, if you have the class container and grid-container on an element, the width of that element is reset from 1080px to auto - which, in your case, means it fills the width of the page. So, your DIV with id "page" is changed from 1080px to the width of the page.
You should remove the container class from this DIV. You may then have to add some styles back to get the final effect you desire.
Hello You Can Style It By Using Some Plug-ins Which present at plug-ins>new one
for example you can go with this plug-in
https://wordpress.org/plugins/woocommerce-login-and-registration/
If You Cant Style It Please Post The Error You Are Getting Neatly And Most Probably You Can Use Wordpress Login For Woo-commerce But If You Are Really Interested To Use Only That You Can Customize It From CSS Or You Can Use Plug-ins Which Do The Same But No Coding Knowledge Required To Do It From Plug-in Because Everything is Graphically Done And whatever The Coding Part Is That Will Be Take Cared By Plug-in Itself So Maximum Use Plugins So It Could Better In Development
1) you can add this css add into theme or child theme style.css
.hfeed.site.grid-container.container.grid-parent{
width: 80%;
}
2) you can remove container class Here:
<div id="page" class="hfeed site grid-container container grid-parent">
my suggestion is second option is right
How to do that? I have post on my blog. I want hide links to guest but not for any crawler only in php not javascript. I can't find any information on google so please help with any suggestion.
if ( preg_match("#(google|slurp#inktomi|yahoo! slurp|msnbot)#si", $_SERVER['HTTP_USER_AGENT']) ) {
// do something after recognize
}
Use css
.link-I-want-to-hide{
display:none;
}
This means the anchor elements will not be physically visible to users, yet exist in the HTML to be parsed by crawlers.
Simply use CSS, just select your HTML elements and apply display: none.
Quick example:
https://jsfiddle.net/wz2ryewd/
.hide {
display: none
}
Or alternatively, wrap all your guest links in a div, apply the "hide" class on it:
https://jsfiddle.net/wz2ryewd/1/
Just a SEO note to pay some extra attention ...
If your site is perceived to contain hidden text and links that are
deceptive in intent, your site may be removed from the Google index,
and will not appear in search results pages as Google could applies a penalization.
I have a filter element to filter data:
http://dualda.com/index.php?option=com_findme&view=info&layout=ranking&interval=7
And here I want the actual "bold" text as well in RED by using CSS. Any ideas?
e.g. this
<a class="redlink" href="/index.php?option=com_findme&view=info&layout=ranking&type=playerByActivity&lang=de">Gespielte Spiele</a>
Complement your CSS for redlink with this:
b .redlink, b .redlink:link, b .redlink:visited {
color: #EE2B4E;
}
Target the links inside b tags and his different states.
You need to apply a color rule in css:
a.redlink {
color: #F00;
}
That should do it, unless it's being overridden by another rule. If you insert CSS like this and you don't see a change, use a tool like FireBug or the code inspector in Chrome to see what CSS rules are being applied to the element and overriding your styles. You may have to make your rule more specific so that it takes priority and is applied.
You can also experiment with your page using jQuery to set styles on the fly. It's a great way to try things.
$('a.redlink').css({color: "#F00"});
I tried this in the console of my browser while viewing your page. The a tags with .redlink changed to red.
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried
text here
The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.
Please advice. Thank you
The css above will affect what happens before each instance of data-icon and not the link shown
They are a css3 feature. Attribute selectors alow you to to apply formatting to elements based on certain attributes.
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
good description here which is where above taken from and here
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.