I'm looking for ages to figure out how to add some space between my recent posts on a wordpress site.
Really have no idea. Anybody that could help?
You have 2 style statements that pretty directly affect these. One has bottom margin but is being overridden by another with margin: 0;. Change this to margin: 0 0 20px 0;.
.primary_content_wrap ul li {
background: url(images/marker.gif) no-repeat 1px 11px;
margin: 0;
padding: 0 0 0 17px;
list-style: none;
line-height: 25px;
font-size: 13px;
color: #005d9e;
}
.recent-posts li {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
each of your posts is a li with an "entry" class :
<li class="entry">...</li>
it seems there's nothing in any CSS for that entry class. What I would do is define it in the CSS with a margin-bottom set to, let's say 10px.
Related
I run some of the web stuff at work on the side, not exceptionally experienced at this stuff. I don't know what element of the process I've gone through has caused the hiccup so if you bear with me, I'll try and explain in-depth.
Recently our site (basic bootstrap template) has begun expand out from just a few pages, and to stay on top of things I opted to pull the header and footer files out into their own includes folder, and use...
<!--Header include-->
<?php $path = $_SERVER['DOCUMENT_ROOT'] . "/includes/"; include ( $path . 'header.html' ); ?>
...for easier management. Went through the site and stripped out old code and changed page extensions to php (and now began testing site on MAMP).The structure of the site is 75% of pages living in root, 25% living in a folder called services. All pages pull the same header.html So far so good.
The problem arrises when I test the site. All pages that live in root (public_html) work as expected, the nav drop down menu contained in the header works fine. But when you click into any of the pages that live in /services/ the dropdown (and only the dropdown), breaks. By breaks, I mean that a dropdown should appear on mouse hover over and it doesn't. All of the other CSS, the theme, the code for a picture slider, works ok. It's just this one element of the nav bar that breaks for these pages that live in the /services/ folder.
I compared the elements of a working page and a broken page by inspecting them firefox, and this is the only place I can see any differences..
On a working page, the working dropdown html shows as...
ul class="dropdown-menu bold" style="display:none;"
With CSS rules of...
element {
display: none;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 20px;
}
.bold {
font-weight: 900;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 180px;
padding: 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background: none repeat scroll 0% 0% #343434;
box-shadow: none;
border-right: 2px solid #302F2F;
border-width: medium 2px 2px;
border-style: none solid solid;
border-color: -moz-use-text-color #302F2F #302F2F;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.dropdown-menu {
border-radius: 0px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
li {
line-height: 1.6em;
}
li {
line-height: 20px;
}
.nav {
list-style: outside none none;
}
body {
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6em;
color: #656565;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
html {
font-size: 100%;
}
The broken page(s) shows html of...
<ul class="dropdown-menu"></ul> <<< I think this might be a red flag??
and CSS of....
element {
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 20px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 180px;
padding: 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background: none repeat scroll 0% 0% #343434;
box-shadow: none;
border-right: 2px solid #302F2F;
border-width: medium 2px 2px;
border-style: none solid solid;
border-color: -moz-use-text-color #302F2F #302F2F;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.dropdown-menu {
border-radius: 0px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
ul, ol {
padding: 0px;
margin: 0px 0px 10px 25px;
}
li {
line-height: 1.6em;
}
li {
line-height: 20px;
}
.nav {
list-style: outside none none;
}
body {
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6em;
color: #656565;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
html {
font-size: 100%;
}
(I can manually change the broken dropdown in firefox inspect to element { display:inline } and the dropdown reappears, with working links to the other pages.)
Overall, I can't understand why this is happening.
All of the other CSS is working on the broken pages, so the links to that location must work.
All pages share the same header.html which uses the same html to create the working dropdowns.
All CSS is called individually at the start of each page in the head (not in the header.html file).
If all pages look at the same header file, and they all point to the same CSS, how am I getting different results?
Thanks,
Found the answer to this a while ago and I figured I'd update. The javascript that animates the nav bar was written out and contained in the footer with relative links to the js folder, which hadn't been updated when the pages were moved into the services folder. So the animations would fail because the javascript files couldn't be located.
Fixed this by making the footer as its own file in an includes folder with explicit links to the js folder from there, then used a php document root include (same as the code above) to bring it into the other pages.
developing a project in wordpress change wanted pictures of the odd cells in the list
i prove the next code but isn't works
ul:nth-of-type(3n+1) li {
padding: 0 0 0 14px;
margin: 10px 0 0 0;
background: url(images/widget-list.png) left 6px no-repeat; /*azul*/
background-position: left 4px;
}
.widget ul:nth-child(3n+2) li {
padding: 0 0 0 14px;
margin: 10px 0 0 0;
background: url(images/widget-list1.png) left 6px no-repeat; /*verde*/
background-position: left 4px;
}
Use :nth-child(odd) to target odd elements.
I am trying to get a jQuery function to slide li items left and right by clicking an arrow. I am using a jQuery script called TinyCarousel.js. While I have it functioning properly, it continues to scroll right until the last li item is in the first position. What I have currently can be seen here in the "Games Currently Testing or Releasing section" under the main slider. If you scroll all the way to the right you will notice the issue.
Is it possible to either...
1) Change the jQuery to make the last li item stop once it is showing all the way on the right side of the window? I know this would have to be relative to the browser window size as well as make one single partial movement incase the window size has a partial item showing. I also know I would have to know the amount of li items which I can do within the php.
2) Or two, append the li continually so that the slider never seems to end. Just continues through repeating over and over? I would guess that I need to continually append li items as well as remove them if they are off screen.
I attempted to create a jFiddle to show the issue. But it is doing something all together different on jFiddle which is closer to what I need. It seems to stop moving right at some point. But it does not need the entire last li to display completely. What is it doing differently than what I have on the live site where it does stop?
Any help is greatly appreciated. I did search and found this but it did not seem to work in this situation. Thank you in adavnce.
I have am using jQuery 1.10.2, php 5.4, TinyCarousel.js version 1.9
Here is what I have currently.
The CSS
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
The php
<div id="slider-code">
<div class="PrevArrow">
<img src="Link to Left Arrow"/>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<img src="Link to Right Arrow"/>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
The jQuery
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));
I think the problem you're having is due to css positioning of the images. Try adjusting the margins so that they will be placed slightly further away from each other; so that when no image is appended the slider will stop and there will be no space. If thats not the issue, try this:
1:
Create a div and place all of the slider images in it.
2:
Give each arrow button a separate div and class.
3:
Use the jquery append function to dynamically add images to the slider class when a user clicks either button.
$(document).ready(function(){
$('.arrowbutton').click(function(){
$('.imageslider').append('.image');
});
});
Also, remember to give your image slider a set width in css, and set overflow to hidden. That should make sure no appended images go outside of the slider, and no scrollbars appear.
I am trying to achieve a divider line between menu items in a Concrete5 site, and tried to implement by adding a border-right to each menu item and then using the :first-child pseudo class to add a separator before the first one. However, the pseudo class is being ignored and borders are being added to both sides of each menu item. Here is the code:
.top-bar-section ul li > a {
display: block;
width: 100%;
color: white;
padding: 12px 0 12px 0;
padding-left: 15px;
font-size: 0.8125em;
font-weight: bold;
background: #0D42C0;
border-right: 1px solid white;
}
.top-bar-section ul li > a:first-child {
border-left: 1px solid white;
}
I don't know the exact structure of the HTML menu that is being produced by the CMS, but these selectors seem to be working. Not sure if there is anything else needed to help with this issue. Let me know if more information is needed to diagnose this problem.
Any help is very appreciated!
All of the <a>s are first children of their respective <li>s. You need to target the first <li> instead. Try this:
.top-bar-section ul li:first-child > a {
border-left: 1px solid white;
}
For future reference, please include your HTML in the question.
I've thought about this problem quite a bit.
Is there are way, say, to automatically insert a line decoration after each line (row) in a <div> or just any element that holds text?
For example:
This is the first line
This is the second line
I noticed this problem because underlines aren't ideal, and inserting a div or separating chunks of text in different divs is awkward. Because different characters have different widths in typography, If I used underscores the two lines become uneven in terms of width. I don't think tables can automatically separate a block of text in two rows. Not without some JQuery doing the split.
Is there something that will let define line decorations after lines ?
I need this because the text in the divs are coming from a database. I don't know the length of each line and so it's awkward If I assume a fixed number of characters per line and start chopping words in half at the end of lines,
like,
Hello World Wha
t is up.
Thanks!
Perhaps you can fake it with a "lined paper" effect. Here is one such result: http://css3.wikidot.com/blog:lined-paper-with-css
I'll copy it here to preserve it in case the original site moves or goes down.
The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.
.paper {
font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
width: 300px;
margin: 0 auto 10px;
padding: 6px 5px 4px 42px;
position: relative;
color: #444;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
In order to get all the text to line up properly on the lines, you need to specifically declare margins and line heights for all text elements. Given we used a background size of 20px above (i.e. it's 20px between the lines), we need to use a line height (or an equivalent line height + margin) of 20px.
.paper h1,
.paper h2 {
font-size: 16px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h3,
.paper h4,
.paper h5 {
font-size: 14px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h4,
.paper h5 {
font-weight: normal;
}
.paper p {margin: 0 0 20px;}
.paper p:last-child {margin: 0;}
.paper ul {margin: 0 0 20px;}
Browser support
It works perfectly in Webkit and Opera, and almost perfectly in Firefox (the ruled margins on the left are 1 pixel too short at one end). Theoretically it should work in IE10, but I haven't tested it.
Another way would be to just create an 1xN.png with 1 pixel filled in at the bottom. and set that as your background-image. Where N equals the line height like below:
<--- Just a speck.
You could also convert the image into a data URI if you are worried about adding an extra request.
CSS
div {
background-image: url("1x16.png");
background-image: url(data:image/png;base64,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);
line-height: 16px;
}