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.
Related
I have a simple website, using php, html, css,
and would like to hide two menu buttons:
menu box & text
<div class="filter margin"></div>
<div class="filter_options">
<div class="filter_op filter_op_selected" data-type="type" data-id="bla 1">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
<div class="filter_op " data-type="type" data-id="bla 2">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
Still it is necessary, that the upper box is ticked & as such recognized by the code;
for the correct work-logic of the menu.
Thanks for any tip or suggestion.
[I know that in the code language mql4/5, which is based on php, you can simply hide a line of code when typing # in front of it.
It won't be shown, but it will be used (if such a box is hidden but ticked, it will behave like that).
I was asking myself how to do that in php]
After researching a lot, I've come to the following answer:
<div class="filter margin"></div>
<div class="filter_options">
<div
class="filter_op filter_op_selected"
data-type="type"
data-id="bla 1"
style="height: 0; visibility: hidden; font-size: 0; padding: 0; margin: 0"
>
<div class="ranking_filter_check"></div>
<div class="ranking_filter_value">bla</div>
</div>
</div>
I have a toggle that I am using for twitter bootstrap, and one of the words is poping out and not staying inside the toggle, I highlighted the messed up word in a red box below:
My code is:
<div class=\"span9 space\">
<h3 class=\"title pull-left\">$name</h3>
<link rel=\"stylesheet\" href=\"lib/prism/prism-light.css\">
<script src=\"lib/prism/prism.js\"></script>
<link rel=\"stylesheet\" href=\"toggle-switch.css\">
<form class=\"form-horizontal pull-right\">
<div class=\"control-group\">
<label class=\"control-label\"></label>
<div class=\"controls btn disabled switch switch-two\">
<input id=\"week9\" name=\"view\" type=\"radio\" checked>
<label for=\"week9\" onclick=\"\">Not Visited</label>
<input id=\"month10\" name=\"view\" type=\"radio\">
<label for=\"month10\" onclick=\"\">Visited</label>
<span class=\"slide-button btn btn-warning\"></span>
</div>
</div>
</form>
</div>
The toggle I am using is from here:
http://ghinda.net/css-toggle-switch/bootstrap.html
Here is also my live code:
http://www.beerportfolio.com/breweryPage2.php?id=BSsTGw
The issue is that the Switch class does not stretch for your words,
you can solve it by hardcoding the width in the switch class in your style sheet or by adding it in the div you want stretch and this should solve your issue
<div class=\"controls btn disabled switch switch-two\" style=\"width: xxxpx !important;\">
while xxx represent the value you need
I did a live edit on the demo you supplied and used your values for the items and added a smaller width than what is needed and the visited part of 'Not Visited' went to a new line. You might want to have a larger width for your toggle item(s).
EDIT:
It looks like you did modify some of the css or it inherited some, you can modify it any way you want but try:
toggle-switch line 210
.toggle label,
.toggle p,
.switch label {
line-height: 13px;/*30px*/
}
and remove:
bootstrap.min.css line 333
.form-horizontal .controls {
margin-left: 0;/*180px*/
}
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!
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.
This question already has answers here:
Closed 12 years ago.
Possible Duplicates:
How do I embed an “a:hover{…}” rule into a style attribute in the middle of a document?
How to write a:hover in inline CSS?
I want to dynamically change the hover colour of an element, but not using external CSS stylesheets, only inline. This is the code (using php to generate the element)
echo '
<div class="container" style="color:#'.$color.'">
'.$contents.'
</div>';
When the user hovers over this container element, the color style will change to the value of $color (at the moment there is no hovering).
Any help would be appreciated.
This will help you if javascript is appreciable
<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
Click Here</TD>
or
Javascript Change Hyperlink Text Color Onmouseover
<style type="text/css">
a {
font-weight:bold;
font-family:verdana;
text-decoration:none;
}
</style>
<script type="text/javascript" language="javascript">
function changeColor(idObj,colorObj)
{
document.getElementById(idObj.id).style.color = colorObj;
}
</script>
<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
Link 1</a>
<br />
<br />
<a href="#" style="color: #999999" onmouseover="this.style.color='#008000'" onmouseout="this.style.color='#999999'">
Link 2</a>
<br />
<br />
<a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onmouseout="this.style.color='#FF0000'">
Link 3</a>
<br />
<br />
<a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'#FF0000');"
onmouseout="changeColor(this,'#008000');">Link Color change using javascript function</a>
You can't, since you can't set the pseudo-selectors inline. Ideally, you should design separate classes in your external css which would represent the various hover states you need, and in PHP assign these classes to your content.