Please go to my website . We build the site under Jupiter theme which uses bootstrap. I'd like to add one more section towards the right side of my logo which is CALL NOW and WhatsApp. Refer the below image.
Add this code after <a></a> which have http://www.b4bconsultancy.com/ link inside .header-logo div
<div class="rgt-side">
<a class="call" href="#">
<span>CALL NOW</span>
</a>
<a class="whatsapp" href="#">
<img src="whats-app-logo.png" class="img-rseponsive">
</a>
</div>
And put css styles as below
.mk-header .fit-logo-img a { floa:left; }
.rgt-side { display: inline-block; float: left; }
a.call { float:left; }
a.whatsapp { float:left; }
Try above code and ask any help you want.
Note - use neccerry styles for further adjustments such as margin, padding etc.
Cheers !!!
Related
I'm trying to make a thumbnail with bootstrap3.
How can I make this, I mean to put this zoom-in glyphicon over the image?:
(sorry for paint shop :D)
Actually, I've got this:
with the following code:
<div class="thumbnail PNET-thumbcolor">
<div class="PNET-cursor-hand center-block text-center">
<img data-src="holder.js/140x140" alt="Producto">
<span class="glyphicon glyphicon-zoom-in"></span>
</div>
<div class="caption">...
</div>
</div>
Is there a way to make this with CSS only, without touching the bootstrap style?
Thanks in advance!
Please comment or ask if you need more information and/or improve! :)
UPDATE:
JSFIDDLE: http://jsfiddle.net/Leandro1981/AKwb4/1/
I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.
.PNET-cursor-hand
{
width:140px;
}
.PNET-thumbcolor .glyphicon-zoom-in
{
position:relative;
top:-20px;
right:5px;
text-align:right;
display:block;
}
Here the demo
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
I'd like to edit the link properties of a specific page so they direct elsewhere than what I specified in the social settings menu, which works globally. So, as it is now the links inherit their properties and theres no way in the cms to change this for every page. Is there a way to add it in the css? I'm not sure how to format it correctly. Here's the hmtl:
The page id: body.page-id-85
The HTML:
<div class="wrapper">
<div class="thb-social-home">
<a title="Facebook" href="https://www.facebook.com/">
<span class="thb-social-icon">2</span>
</a>
<a title="YouTube" href="http://www.youtube.com/">
<span class="thb-social-icon">5</span>
</a>
</div>
</div>
Thanks!!
You can use body.page-id-85 as base selector for this page:
#body.page-id-85 .wrapper {
/* wrapper specific rules*/
}
#body.page-id-85 .thb-social-home {
/* thb-social-home rules */
}
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
I am trying to in include twitter widget in my web site. It is developed using Smarty . I am trying to customize the widget. Now it has a scroll bar in the right section. I think we can remove that by adding a style overflow:hidden to the class stream. But I am not sure how can we do that . I have tried with an external css file , but it is not working. Please help me to customize it by removing the scroll bar.
<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="myid" width="376" height="200">Tweets by #name</a>
{literal}
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");</script>
{/literal}
Please check the page here http://www.jobslamp.com/test.php
New code
-------------
<div class="clear"></div>{literal}
<style TYPE="text/css">
#footer {
background-image: none !important;
}
</style>{/literal}
<a class="twitter-timeline" href="https://twitter.com/username" data-widget- id="myid" width="376" height="200" style="border:1px solid red !important;">Tweets by #username</a>
{literal}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>{/literal}
<div class="clear"></div>
try this css:
#footer {
background-image: none !important;
}
No need to disable all. Just use new parameter provided by the API :
<a href="your_timeline" data-chrome="noscrollbar" ...
source = dev.twitter