I want to make the title box auto-width, but I don't get it. Cannot post any Screenshots. My Css Code for the blogpost title is actually like this:
section#maincontent header{
position: relative;
left: 25px;
padding-left: 10px;
background: #e5e5e5;
margin-top: 50px;
padding-top: 0px;
padding-bottom: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 1px solid #CCCCCC;
}
Need help! Thanks!
If you post your HTML code we'd probably be able to help you better, but in general a div is a block level element, so it will automatically expand to the width of its containing element. If you want the title to appear in a box that is as wide as the title itself (with a little padding) consider changing the div to display:inline, styling the title itself, or wrap it in an inline-element such as a span.
JSFiddle: http://jsfiddle.net/DHW7Y/7/
Related
I have revolution Slider on a Wordpress CMS. I've implemented custom css in the Revolution Slider panel. When you first load the page the slider is rounded on the top left and bottom right, but when you resize the window (just a little bit) the rounded corners disappear! I cannot find the culprit, the responsiveness should continue to work with the custom css, but it does not. Thank you for any help.
https://www.superherodigital.com/livescan/
Code that I'm using.
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
no need for these complicated tasks ...
Just follow the path below in Direct Admin and ... (file manager)
path:
example.com/wp-content/plugins/revslider/public/assets/css/rs6
open rs6
use ctrl+f and search rs-module
rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }
put border-radius:25px or anything 35px , 45px ....... like up line ...
This is probably something to do with the slider declaring the CSS properties in JS (dynamically changing the DOM properties), removing any applied styles in your stylesheet. I can see you're applying these declarations on #rev_slider_1_1_wrapper.
I would add a class to this instead, and apply the border radius to a new class.
.rev-slider-border-radius {
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
}
Then add the class to the slider wrapper element if it is in your HTML:
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>
Or, if the JS is generating this, apply the class via JS after the slider has been initialised:
$(function() {
$('.rev_slider_wrapper').addClass('rev-slider-border-radius');
});
You can add a wrapper around the slider revolution slider with the class roundedslider where the roundedslider class has following style attributes:
.roundedslider{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;
}
This works perfect in the example here also: http://revolution.themepunch.com/home-slider-boxed/
All other questions about ThemePunch products are answered at http://themepunch.com/support-center
Hope this helps you further ?
To me this is working fine, just substitute your slider and the radius you like on the corners:
.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}
I want to make four equal boxes with 10 small (thumb) boxes in each. How can this be done with css? Here is the image of what is the goal.
So far I have the left column box
.left_column{
margin-top: 10px;
width: 150px;
float: left;
border:2px solid #ccc;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
text-align: left;
padding: 10px;
font-size: 14px;
background-color: #f0f0f0;
color: #888;
}
.left_column p {
text-align: center;
border-bottom: 1px solid #ccc;
font-size: 20px;
}
.left_column a {
text-decoration: none;
margin-left: 10px;
}
edit:
Here is the Fiddle
You could create a container for each of the boxes with a fixed width and then put the thumbnails inside. If you use float: left; on the container boxes then they will move depending on the window size.
I can just suggest to use flex box.
It has only support for newer browsers but its actually totally easy to use and its responsive. Here is a small explanation:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The inner content could be simple created then by float:left; and display: inline-block;
Here is an example on jsfiddle:
http://jsfiddle.net/fpuwk7dL/
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
After much poking around online, I've found lots of advice and examples for using CSS to style submit buttons, but they all result in rectangular buttons. I want to make a non-rectangular button that automatically sizes itself to fit the button legend. Specifically, I want the button to look like this (plus or minus the rounded corners):
Any suggestions?
Totally possible with border radius, but you will have to submit with JavaScript instead of the <button> element.
For instance:
.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 60px 22px;
-moz-border-radius-topright: 60px 22px;
border-bottom-right-radius: 60px 22px;
-moz-border-radius-bottomright: 60px 22px;
}
Makes:
See it live:
http://jsfiddle.net/9zamA/
You could use the CSS border triangle trick: http://css-tricks.com/snippets/css/css-triangle/
You could use svg.
could anyone tell me why, if i use border-radius: 10px it doesn't round all the edges the same?
#portfolio1
{
background-image:url("images/bg.png");
background-repeat: none;
height: 150px;
width: 300px;
float: left;
margin-top:10px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
border-radius: 10px;
/*border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;*/
/*-webkit-border-radius: 20px;*/
}
Notice I've commented a few lines of css where I was trying different things. I seems that if I to the individual border values to different for left and right edges it looks okay but still has something wrong with it.
Also the same with the webkit one. I'm using chrome, did try it with firefox as well but got the same problem. Could it be to do with the margin values I'm using? also I have portfolio1, portfolio2 and portfolio3 which are all very similar, but when displayed on my webpage I'm using each of them twice..... If that makes a difference.
Thanks for the help.
If you wanted to make all the edges round at 10px then you don't need to have it be so complicated (specifying topright,topleft,etc.)
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Here's a very useful tool you can use.