I have created CSS for highlighting color of Active Menu in Joomla, though the color change is working fine on hover, but the color does not change in of Active Menu
Any getaways !! Note - we have one more site in Joomla 1.5 older version - there this code works fine as active menu color changes. However issue coming in Joomla 2.5
CSS
.bluetabs li a:visited{
color: #FFFFFF;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #FFFFFF;
background:#b60205;
text-decoration:none;
}
.bluetabs li.selected{
background:#b60205;
padding:0;
}
.bluetabs li.selected a{ /*selected main tab style */
background:#b60205;
border-bottom-color: white;
}
.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
This is the function wherein correctly defining selected menu too
foreach($rows as $row){
if(($lt+1) < $cnt ){
$maincls = "";
}else{
$maincls = "last ";
}
if($parentid == $row->id){
$class = $clsArray[$lt].'selected';
}else{
$class = $clsArray[$lt];
}
}
$list.='</ul>';
}
echo $list;
//echo $list_sub;
}
The site name is :- http://www.ecarloan.in
However, checked it through Firebug, its not taking up 'li class=selected' in the active menu, rather showing below :-
Its not executing :-
<li class="selected">
rather showing, this code in active css for a sample active menu
<li class="item-101 current active">
Discussion Board
</li>
The Entire Function Code is :-
foreach($rows as $row){
if(($lt+1) < $cnt ){
$maincls = "";
}else{
$maincls = "last ";
}
if($parentid == $row->id){
$class = $clsArray[$lt].'selected ';
}else{
$class = $clsArray[$lt];
}
if($vid!="" and $row->id==8){
$list.=' <li class="'.$class.'">Service</li>';
}else{
$list.=' <li class="'.$class.'">'.$row->name.'</li>';
}
}
$list.='</ul>';
}
echo $list;
//echo $list_sub;
}
What I believe to be your main issue is the change of mod_mainmenu to mod_menu in Joomla! 1.6+.
This causes your template override not to be executed.
You need to change its path to templates/<your template>/html/mod_menu/default.php.
Note that this will override all of the menus on your site, if you have more than one.
If you want to only override this menu, you can create a layout override, which you can selectively apply to components and modules. It is explained here.
Note that mod_mainmenu and mod_menu are not completely the same (e.g, the current id given to the current item has been changed to a current class to prevent w3c validation issues when more than one menu is displayed).
Therefore, you may need to slightly adjust your template override code.
Related
I'm working on a WordPress site and running into a problem. I have a list on a page including download buttons, only I can't seem to work out how to change the colour of the button or the font? The code is as follows:
class="wp-block-file__button" download>Download</a></div>
How would I go about formatting the button here?
Thanks
Depending on where is your button (admin panel or theme):
For admin panel (Add to function.php)
<?php add_action( 'admin_head', 'theme_admin_css' );
function theme_admin_css() {
echo '
<style>
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
</style>'; ?>
OR if in actual theme (Add to your style.css)
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
I want to achieve that when the page attribute selects a certain template, the background color of the page can be randomly changed. (Only this page, not for all pages).
Unfortunately, my code (PHP) doesn't work.
add_filter( 'body_class','modele_bg_couleur' );
function modele_bg_couleur($classes)
{
if(is_page_template('modele-bg-couleur.php')){
$test = array("beige", "azure", "linen", "snow");
$classes[] = $test[array_rand($test)];
}
return $classes;
}
add_action( 'admin_head', 'modele_bg_couleur_css' );
function modele_bg_couleur_css(){
echo "
<style type='text/css'>
.beige {
background-color: beige;
}
.azure {
background-color: azure;
}
.linen {
background-color: linen;
}
.snow {
background-color: snow;
}
</style>
";
}
The body_class filter lets you add classes to the front end of your site. The admin_head action lets you add custom code to the admin pages (Wordpress back end). So right now you are adding a body class to the front end of your site but applying the CSS to the back end.
I'm assuming you want this to work on your front end. You can then just add the following CSS to your theme via the customizer or via your own child theme:
body.beige { background-color: beige!important; }
body.azure { background-color: azure!important; }
body.linen { background-color: linen!important; }
body.snow { background-color: snow!important; }
I am working on a web component library with StencilJS, and I have a problem using the CSS + Selector. I have a Breadcrumb web component, which will contain multiple breadcrumb items (web component as well). Every Breadcrumb item after the first item should add > smybol with ::before. Therefore I use the CSS + selector
df-breadcrumb.tsx
export class DFBreadcrumb {
render() {
return <ol class="breadcrumb">
<slot></slot>
</ol>
;
}
}
df-breadcrumb-item.tsx
export class DFBreadcrumbItem {
/**
* Link
*/
#Prop() link: string;
render() {
return this.link ? <li class="breadcrumb-item"><a href={this.link}><slot></slot></a></li> :
<li class="breadcrumb-item"><slot></slot></li>
;
}
}
test.html
<df-breadcrumb>
<df-breadcrumb-item link="#">Start</df-breadcrumb-item>
<df-breadcrumb-item link="#">Library</df-breadcrumb-item>
<df-breadcrumb-item>Item</df-breadcrumb-item>
</df-breadcrumb>
my css rule
.breadcrumb-item+.breadcrumb-item:before {
display: inline-block;
padding-right: .5rem;
color: #6c757d;
content: ">";
}
expected output: Start > Library > Item
current output: Start Library Item
I think this is not working cause Stencil ecapsulates my li tags and their direct parent is not the ol. I read something about using the :host() pseudo class, but could not got it working. Also I have set shadow: falsein my components.
You're right, the problem is the df-breadcrumb-item element.
A simple alternative would be to apply your CSS to the df-breadcrumb-item elements:
df-breadcrumb-item + df-breadcrumb-item:before {
display: inline-block;
color: #6c757d;
content: ">";
}
Alternatively you could add the arrow to the .breadcrumb-item element inside the df-breadcrumb-item component, either depending on a property or by manually checking if the #Element() is the last node.
How can i position my dropdown at cursor position inside a textarea? I have found this question was already asked here many times but i cant able figure out the correct solution ..
this is the JSBIN
please help me with your suggestions
Thanks in advance
I know it isn't an exact answer on the question (this solution doesn't use a textarea, but a contentEditable div), but I don't think there is any way of getting x-y-coordinates using either the event, an attribute or function on the textarea or an attribute or function on the Selection object.
I have meshed up an example on JSBin. Please note that I haven't bothered testing for compatibility in other browsers and that it won't return the caret to where you left off. I can't figure out the code for that. I believe window.getSelection() will not work in IE, and in IE8- it would be completely different. You probably want to make sure too, that the menu will not be displayed right from the edge of the screen.
The HTML
<div id="target" contentEditable="true">Type # to see the dropdown.... </div>
<div class="dropdown">
<ul id="dropdown" class="dropdown-menu hide" role="menu" aria-labelledby="dropdownMenu">
<li><a>One</a> </li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a> </li>
</ul>
</div>
The CSS
#target {
height: 100px;
border: 1px solid black;
margin-top: 50px;
}
#dummy {
display: inline-block;
}
.dropdown {
position: absolute;
top: 0;
left: 0;
}
The Javascript & JQuery
$("#target").keydown( function(e) {
if(e.which === 50 && e.shiftKey === true ) {
//Prevent this event from actually typing the #
e.preventDefault();
//console.log( window.getSelection() );
var sel = window.getSelection();
var offset = sel.baseOffset;
var node = sel.focusNode.parentNode;
//Get the text before and after the caret
var firsttext = node.innerHTML.substr(0,sel.baseOffset);
var nexttext = (sel.baseOffset != sel.focusNode.length ) ? node.innerHTML.substr( sel.baseOffset, sel.focusNode.length) : "";
//Add in # + dummy, because # is not in there yet on keydown
node.innerHTML = firsttext + '#<div id="dummy"></div>' + nexttext;
//Transfer all relevant data to the dropdown menu
$('.dropdown').css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop).prop('x-custom-offset', offset + 1);
//Delete the dummy to keep it clean
//This will split the contents into two text nodes, which we don't want
//$('#dummy').remove();
node.innerHTML = firsttext + '#' + nexttext;
//Put the caret back in place where we left off
//...I can't seem to figure out how to correctly set the range correctly...
$('#dropdown').removeClass('hide').addClass('show');
} else {
$('#dropdown').removeClass('show').addClass('hide');
$('.dropdown').removeProp('x-custom-offset');
}
});
$('#dropdown').on( 'click', 'li a', function( e ) {
e.preventDefault();
$('#target').html( function( i, oldtext ) {
var firsttext = oldtext.substr( 0, $('.dropdown').prop('x-custom-offset') );
var nexttext = oldtext.substr( $('.dropdown').prop('x-custom-offset'), oldtext.length );
console.log( e );
var inserttext = e.target.innerText;
//Cleanup
$('#dropdown').removeClass('show').addClass('hide');
return firsttext + inserttext + nexttext;
} );
} );
The explanation
This example works based on that you can insert an element in a contentEditable and retrieve it's offset to the top and the left of the screen. When shift + key 50 is pressed, the event handler will prevent the # from being written and instead inserts the # + dummy object itself. Then we retrieve the offset from this object and move the dropdown menu to that offset. Furthermore, we save the character-offset as a custom property x-custom-offset of the menu, so that we can insert a value at that specific location. We then need to remove the dummy div, but if we would remove the dummy with $('#dummy').remove() the text node before the dummy and the text node behind the dummy will not merge. This will delete the last textnode if we were to put an other # somewhere and/or place it in the wrong location. Therefore, we simply replace the contents of the editable div again. Last, the caret must be set back to it's original position. I cannot figure out how to do this properly though.
The second handler is to insert text into the textbox. The code should be self-explanatory. The x-custom-offset property we set earlier is used here to insert the text into the correct place in the textbox. $('#dropdown').on( 'click', 'li a', function( e ) { ... } ); will attach the click event to the ul instead of the li's, so that it will keep working if you dynamically create the li's (but it will only fire if you click the link part).
You can get the position of the mouse and then move the drop-down list to this position.
You just need to ensure the popup content has a higher z-index than the element you'd like it occlude, and that it's position is set to absolute.
Here's a small test sample I wrote once.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function mInit()
{
}
function onShowBtn(e)
{
var element = byId('popup');
element.className = element.className.replace(' hidden', '');
var str = '';//'border-radius: 32px; border: solid 5px;';
e = e||event;
str += "left: " + e.pageX + "px; top:"+e.pageY+"px;"
element.setAttribute('style',str);
}
function onHideBtn()
{
var element = byId('popup');
if (element.className.indexOf(' hidden') == -1)
element.className += ' hidden';
}
</script>
<style>
#controls
{
display: inline-block;
padding: 16px;
border-radius: 6px;
border: solid 1px #555;
background: #AAA;
}
#popup
{
border: solid 1px #777;
border-radius: 4px;
padding: 12px;
background: #DDD;
display: inline-block;
z-index: 2;
position: absolute;
}
#popup.hidden
{
visibility: hidden;
}
</style>
</head>
<body>
<div id='controls'>
<input type='button' value='show' onclick='onShowBtn()'>
<input type='button' value='hide' onclick='onHideBtn()'>
</div>
<br>
<div id='popup'>
<p>This is some assorted
text</p>
<hr>
<ul>
<li>item a</li>
<li>item 2</li>
<li>item iii</li>
</ul>
</div>
</body>
</html>
I'm absolutely fed up with this. I've been trying for a week trying different code, modifying different values etc. I simply cannot skin my Drupal (6)'s search submit button.
I want to be able to swap out the submit buttons for events like hover, active, and such. One of the biggest issues is that I can't figure out how to change the php code so these CSS styles only are applied to the search submit button, not all the other buttons on the site.
Here is the code I have semi-working at the moment. Right now another issue I face is that, the span tag keeps showing the size is only 45x16px, I've applied width and height properties to be 54x28 but it doesn't change anything.
function phptemplate_button($element) {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
// We here wrap the output with a couple span tags
return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span>\n";
}
span.button {
background-image: url('images/go-button.png');
background-repeat: no-repeat;
border: none;
width: 53px;
height: 28px;
}
span.button:hover {
background-image: url('images/go-button-gifsmooth.gif');
background-repeat: no-repeat;
border: 0;
}
span.button:active {
background-image: url('images/go-button-pressed.png');
background-repeat: no-repeat;
border: 0;
}
span.button span input {
background: transparent;
border: 0;
color: transparent;
padding: 0;
cursor: pointer;
}
If you want to theme the search button for the sites main search page (www.example.com/search), you can use this in template.php:
function phptemplate_button($element) {
// Check that the buttons belongs to the site search page
if ($element['#value'] == 'Search' && $element['#id'] == 'edit-submit') {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
// We here wrap the output with a couple span tags
return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span><div style='clear:both;'></div>\n";
}
else {
return '<input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
}
}
To alter the button for the "theme search" in header or the "search block", you will have to create a tpl file named either search-theme-form.tpl.php or search-block-form.tpl.php and place it in your theme directory. Then insert code similar to this:
// This is for the theme search... for search block, $search['search_block_form']
<?php print $search['search_theme_form']; ?>
<span class="button"><span><input type='submit' name='submit-form' value='TEST' class='this-submit'/></span></span>
<?php print $search['hidden']; ?>
To make the span display as the correct size, I got it working by adding display: block; to the style for span.button. It may move the button around a little, but with some more CSS you can get it wherever you like.