I am having problems having my CSS applied when a menu item links to a specific record.
Take the simple menu below, the CSS as defined in Menu works just fine for 'Account' but when I click on 'My Account' it doesn't.
<div id="Menu">
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Account', 'url'=>array('/account/view'),
// CSS works fine
array('label'=>'My Account', 'url'=>array('/account/view/id/'.Yii::app()->user->id),
// CSS applied to active link does not work
),
));
?>
</div>
CSS
#Menu ul li.active a {
color: #CCC;
text-decoration:none;
}
Any ideas???
Thanks
<div id="Menu">
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Account', 'url'=>array('/account/view'),
// CSS works fine
array(
'label'=>'My Account',
'url'=>array('/account/view/id/'.Yii::app()->user->id),
'active'=>($this->getId() == 'account' && $this->getAction()->getId() == 'view' && isset($_GET['id'])))
// you have to set manually the rule for "active"
),
));
?>
</div>
Also you should correct your Url rules so you can create URLs properly like this:
'url'=>array('account/view', 'id'=>Yii::app()->user->id)
To obtain the correct url from this you should create URL rule in config file like this:
'rules'=>array(
....
'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
....
),
Related
relevant HTML looks like:
<li class="lineEntry t1" title="Right-Click for Options" style="">
<span id="job_111095">
<i class="ic-p-appr"></i> 111095
</span> Foo/Bar, Some Text </span>
</li>
... and the relevant CSS looks like ( file = icomoon's foo.css ) ...
/* this is an icomoon icon, that should be green */
.ic-p-appr:before {
content: "\e905";
color: #0f8040 !important;
}
... and ( file = bar.css ) ...
.t1{color:#B92426;}
/* .line-entry never defines a color */
I have added !important AND loaded the foo.css After the bar.css in an effort to make the icon green (#0f8040), but the icon nested within the .t1 class always inherits that parent's font color ONLY when mpfd converts the HTML to a pdf doc. (the nested icon in HTML works as expect)
When I look at the mPDF documentation for supported CSS, I see nothing there or in SO that suggests why this occurs. My mPDF is 7, and here is the configuration:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
'../vendor/resources/fonts',
]),
'fontdata' => $fontData + [
'icomoon' => [
'R' => 'icomoon.ttf',
],
],
'format' => 'A4-L',
'orientation' => 'L',
'debug' => true,
]);
see:
enter image description here
Help with this issue is appreciated.
Fixed: I discovered that because mPDF ver7 does not support CSS pseudo class :before, it was necessary to declare the font-color independently with the class name. So for my HTML output, this worked, .ic-p-appr:before { color: #0f8040 !important; } but I had to declare it again, minus the ':before' to register that style in the PDF document.
Summary: mPDF7 ignores CSS style attributes declared under a pseudo-class.
I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
I am using the woocommerce product category widget on my sidebar and footer widget area.
I have 2 parent categories. I would like these to be displayed, but not be clickable links.
You can see the page here http://www.terrykirkwood.co.uk/w
Can anyone advise what css to add to stop these links being clickable?
Thanks
Here's the code from the first occurrence:
<li class="cat-item cat-item-47 cat-parent">Original Paintings<ul class="children">
CSS only controls style, so there is no CSS you can use to disable a hyperlink. You could change the CSS to not change cursors, so it doesn't "look" like a link.
.cat-parent a {
cursor: default;
text-decoration: none;
}
.cat-parent .children a {
cursor: pointer;
text-decoration: underline;
}
And then use some jQuery to actually disable the click function:
$('.cat-parent').click(function(e) {
e.preventDefault();
});
If you were bold you could probably also modify the widget to not print an <a> link for parents, but I can't check on that right now.
Edit
You can either add the script to one of your theme's scripts, load a new external script file or drop the following into your themes' functions.php:
function so_add_this_script_footer(){
if( !is_admin() ) { ?>
<script>
jQuery(document).ready(function($) {
$('.cat-parent > a').click(function(e) {
e.preventDefault();
});
});
</script>
<?php }
}
add_action('wp_print_footer_scripts', 'so_add_this_script_footer');
All parent classes have a 'cat-parent' class, so you can either add a condition - 'javascript: void(0)' - in widget for anchor tag 'href'.
Alternatively , you can add the below jquery code,
jQuery('.footer-widget').find('.product-categories li.cat-parent').each(function(){
if(jQuery(this).find('ul.children').length == 1){
jQuery(this).find('a').attr('href','javascript: void(0)');
}
});
This will reset all parent category links that have child categories. Now, If user clicks on parent category, it will not do anything.
This will also make sure, that if parent categories don't have child categories, then it will not be reset.
Not sure if this a stylesheet problem or what. The cstarratings are mushed together. The picture is actually showing 3 cstarratings into one line.
Other things I've tried in my css, display:inline; clear:both; remove float:right
my stylesheet enclosing the cstarrating:
.profile-rating-right-content
{
float:right;position:
relative;width:45%;
display:inline;
padding-right:5px;
padding-top: 10px;
}
my cstarrating widget is as follows:
<div class="profile-rating-right-content">
<?php $this->Widget('CStarRating', array(
'model'=>$data,
'attribute'=> 'star',
'minRating'=>1 ,
'maxRating'=>5 ,
'starCount'=>5 ,
'allowEmpty'=>false,
'ratingStepSize'=>1,
'callback'=>'
function(){
url = "index.php?r=user/review/updateStar";
jQuery.getJSON(url, {id: '.$data->review_id.', val: $(this).val()}, function(data) {
if (data.status !== "success"){
alert("error");
}});}'
));?>
</div>
This wasn't a stylesheet problem.
The IDs for each group were the same, so the widget needs
'name'=>'rating'.$data->id,
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.