Is there a way for me to highlight a menu li depending on the page id? I can't seem to figure out a way to do it.
http://www.dawaf.co.uk/cthm/work/
<div id="header">
<h1>
<a href="http://www.dawaf.co.uk/cthm/work">
<img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />
</a>
<div id="contact-details">
26 Queen Anne Road, London, E9 7AH<br />
t + 44 7912325101<br />
hello#cthm.co.uk
</div>
</h1>
<div id="nav">
<span id="nav-li">
Work
Studio
CTHM+
<a href="https://twitter.com/hello_cthm" target="_blank">
<img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/twitter.png" alt="Twitter" width="13" height="13">
</a>
</span>
</div>
</div>
<div id="content">
I would recommend adding an active class to the navigation item. Something like this:
Work
And then the CSS:
#nav a.active {
/* your active style here */
}
You have two options. One is that mentioned by Zak, whereby you would need to use jQuery for your website to mark only one item at a time as "active". The other option is the CSS :active selector, which will auto apply CSS to the link which is in use (at the present time). For example:
#nav li a:active {
/* Insert styling here, such as, background-color: #01B */
}
Let me know if this helps!
Related
I have a fresh installation of wordpress, and I wrote some quick rewrite rule in my functions.php that looks like this -
// "rewrite" /assets/xyz to /assets/?asset=xyz
function assets_rewrite_rule($rules) {
global $wp_rewrite;
$asset_rule = array( // (not tested)
'assets/(.+)/?' => 'index.php?pagename=Assets&asset=$matches[1]'
);
return array_merge($asset_rule, $rules);
}
add_filter('page_rewrite_rules', 'assets_rewrite_rules');
And I have my sidebar translated with WPML and String Translation in the most primitve way.
Here's the english part (not translated) of my sidebar -
<div class="sideall">
<div class="sidebar-mai1">
<div class="sidebar-name">
<img style="width: 25px; margin-right: 10px; margin-bottom: -7px;" title="first asset" src="/wp-content/images/sidbar-assets/firstasset.png" alt="first asset" />First Asset</div>
<div class="sidebar-btn">
<a class="btn-sidebar" href="/assets/first-asset/">Review</a>
<a class="btn-sidebar1" href="/buy/first-asset">Trade Now!</a></div>
<div style="clear: both;"></div>
</div>
And while trying to make a translation to other language (let's say italian), the wpml refuses to save my changes to the review links..like my redirection rule is affecting it somehow.
Here's the translation I added to the sidebar -
<div class="sideall">
<div class="sidebar-mai1">
<div class="sidebar-name">
<img style="width: 25px; margin-right: 10px; margin-bottom: -7px;" title="first asset" src="/wp-content/images/sidbar-assets/firstasset.png" alt="first asset" />First Asset</div>
<div class="sidebar-btn">
<a class="btn-sidebar" href="/it/assets/first-asset/">Revisione</a>
<a class="btn-sidebar1" href="/buy-it/first-asset">Scambia ora!</a></div>
<div style="clear: both;"></div>
</div>
As you can see both the review and the buy links were changed.. but after I hit save, it only saves the change i made in the buy href, but it reverts my change to the review link, and it looks like this after I save -
<div class="sideall">
<div class="sidebar-mai1">
<div class="sidebar-name">
<img style="width: 25px; margin-right: 10px; margin-bottom: -7px;" title="first asset" src="/wp-content/images/sidbar-assets/firstasset.png" alt="first asset" />First Asset</div>
<div class="sidebar-btn">
<a class="btn-sidebar" href="/it/assets">Revisione</a>
<a class="btn-sidebar1" href="/buy-it/first-asset">Scambia ora!</a></div>
<div style="clear: both;"></div>
</div>
As you can see, after I hit save, it removes the /first-asset part from my translation and now it leads to an empty page (/it/assets) .. I am wondering if it may be cause as a result of the rewrite..
An alternate way to approach this:
Listen to your customer's browser setting.
locale_accept_from_http($_SERVER['HTTP_ACCEPT_LANGUAGE']);
https://secure.php.net/manual/en/locale.acceptfromhttp.php
You can then rewrite it to a function like this:
function my_get_langauge() {
static $lang;
if(is_null($lang)) {
$lang = strtolower(substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));
/**
* Check list of allowed/accepted languages or revert to default
*/
if(!in_array($lang, ['nl','en','de','it']) )
{
$lang = 'en';
}
}
return $lang;
}
This way you don't have to worry about redirects for languages, and you can accept languages as your website user wants to see it.
If you test your expression online you'll see that your regex is removing the first-asset part of the URL.
Regular Expression: assets\/(.+)\/?
Test String: /it/assets/first-asset/
This will return /it/assets/.
I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
The links on the images are being hidden or covered and I cannot figure out why. The first <a href.. below is an example of this.. Live version can be found here.. Basically any of the product images should be clickable..
<div class="image-wrap">
<a href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">
<img width="150" height="150" src="http://fundraisingfountain.pixelworklab.com/wp-content/uploads/2013/06/Pillow-Pets-Bulldog-2-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Pillow Pets - Bulldog (2)">
</a>
<ul class="product-details">
<li class="details">
<a class="button details" href="http://fundraisingfountain.pixelworklab.com/product/bull-dog/" title="Bull Dog">View Details</a>
</li>
<li class="price-wrap">
<span class="price"><strong><span class="amount">$25</span></strong></span>
</li>
<li class="cart">
Add to cart
</li>
</ul>
</div>
It works fine on my machine.
You'll have to check your CSS and make sure that there are no div tags that are layered on top of it (or have a higher z-index than it).
That is because you have set ul height:100% that is why it overlaps the image.
Change the height for the ul to something smaller and it will work fine
woocommerce.css Line # 634
ul.products li.product .product-details{
height:25px;
}
btw if you give a
border="0"
to your image links there wil be no grey (or any other color) border around it
Here's what you need to fix
ul.products li.product .product-details {
height: auto;
top: 108%;
}
ul.products li.product .product-details li {
vertical-align: middle;
}
I'm trying to limit maintnance headaches by avoiding having to copy and paste code and having to update it on several different sites. Should I use an iframe? So far I just used inline CSS to style it and plan on copying a pasting to 3 or 4 other sites. Kind of like:
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
<a href="http://site1.com/" target="_blank" title="site 1">
<img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
<a href="http://site2.org/" target="_blank" title="site 2">
<img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
<a href="http://site3.org/" target="_blank" title="site 3">
<img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;">
</a>
<a href="http://site4.org/" target="_blank" title="site 4">
<img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
</div>
If you don't mind having a slight delay, you could write a light JavaScript that loaded the content into the page via AJAX, much like facebook / many other widgets do.
The benefit that offsets the fact that your links are not part of the page's initial HTML is the fact that you can update the content of all widgets from one place, with no chance that you'll forget one int he future.
Have a look into how Facebook / Google + / Twitter / Everyone else does this.
Edit
Your question got me thinking about how one might do this, so I did it. I've made a working JSFiddle example.
Basically, you paste an empty div and a script tag into your target pages. The script references a file stored on your central server. It creates another script tag in the document, which itself contains a call to a function defined in the first script, which inserts your widget into the specified div on the page.
Pasted into your pages
<div id="placeholder-div"></div>
<script type="text/javascript" src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/script.js"></script>
First script content
(function loadContent() {
(function xss_ajax(url) {
var script_id = null;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/content.php');
script.setAttribute('id', 'script_id');
script_id = document.getElementById('script_id');
if(script_id){
document.getElementsByTagName('head')[0].removeChild(script_id);
}
// Insert <script> into DOM
document.getElementsByTagName('head')[0].appendChild(script);
})();
})();
function callback(data) {
document.getElementById('placeholder-div').innerHTML = data;
}
Inserted script content:
<?php ob_start(); ?>
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
<a href="http://site1.com/" target="_blank" title="site 1">
<img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
<a href="http://site2.org/" target="_blank" title="site 2">
<img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
<a href="http://site3.org/" target="_blank" title="site 3">
<img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;"/>
</a>
<a href="http://site4.org/" target="_blank" title="site 4">
<img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
</div>
<?php $content = json_encode(ob_get_clean());
echo "callback($content);";
And after all this, it occurred to me that you could just use an iframe:
<iframe src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/iframe.html"></iframe>
Personally, I would use the JavaScript method, as this would allow me to modify the style of the widget whenever I wanted, without requiring my users to update their pages.
I have a site where sponsors pay to have their own section with a banner.
However, since updating to the latest vbulletin version 4.1, i am having problems getting the homepage to look right with the banners.
If you look at the homepage of http://www.r32oc.com you will notice that the banners are being manipulated by the text title of the section they are within. Ideally i would like to get the banner to stick to the far right of that box or directly underneath the section title.
The code for the forumdisplay page is this:
<!-- vBSponsors -->
<vb:if condition="$foruminfo['sponsor_enabled'] == 1 AND $vboptions['sponsor_global_enable_sponsorship'] == 1">
{vb:raw vboptions.sponsor_global_default_text}
<a href="vB.Sponsors/link.php?f={vb:raw foruminfo.forumid}" title="{vb:raw foruminfo.sponsor_name}" target="_blank">
<vb:if condition="$foruminfo['sponsor_banner_enabled'] == 1 AND $vboptions['sponsor_global_enable_banners'] == 1">
<vb:if condition="!empty($foruminfo['sponsor_banner_big'])">
<vb:if condition="$vboptions['sponsor_global_enable_big_banners'] == 1">
<img src="{vb:raw foruminfo.sponsor_banner_big}" border="0" align="right" />
<vb:else />
<img src="{vb:raw foruminfo.sponsor_banner}" border="0" align="right" />
</vb:if>
<vb:else />
{vb:raw foruminfo.sponsor_name}
</vb:if> </vb:if> </a> </vb:if>
<!-- / vBSponsors -->
If anyone can helpy me with this, i would appreciate it.
On line 364 of the source there is a div beneath the #breadcrumb div that has the following inline style:
<div style="width:728px; margin:0 auto; padding-bottom:1em">
To change it to align left you would change margin:0 auto; to just margin:0;. To align right you would change it to margin:0 0 0 85px;.
I am not familiar with vbulletin so I can't tell you where this div styling is located, however if you do a search for the #breadcrumb div then you are likely to find it.