Here is what I'm trying to do, and I understand the way that wordpress has it already set up, but I rely heavily on being able to modify and basically change whatever I need too, and in core files as well. However, I am using multisite so changing the core file's is now not an option.
The image below is somewhat how I am wanting the final product to appear, but I noticed other than using wordpress's ul, ol & li styles, I need to be able to customize it more than what has been provided by that, just in case you are wondering why I'm taking the hard way.
Anyways, looking at the image below, where the white rectangle is, I'm wanting to be able to change the color and ultimately allow myself to change the formatting to whatever I want that is different for all user replies. I have no idea how I'd write it, but more than likely it'll have to be an if/else statement. Basically, it'll say:
If parent (depth 0) comment, display this formatting, else (depth of 1 or greater, which would be a child reply), this display it this. Any idea's?
Here is my functions theme file and my comments theme file. AND just in case, the comment-template file under the wp-includes that says how to display and label the comments as parents/children.
I'd also like to point out, that I'm looking for help and suggestions, not criticism. If I knew the answer, I wouldn't be asking for help.
Based off of what BDHorrigan said, I came up with the following:
blockquote {
background: #292929;
border-left: 7px solid #00D9FF;
color: #A3B808;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
blockquote:nth-child(1) {
border-left: 7px solid #FFBE40;
}
This allowed every child reply to be the same because they would be all at a nth-child of 1. Thank you!
If it's just colour you want to change, is there any reason you can't just use CSS? E.g. make a rule for li.depth-1, another for li.depth-2, etc.?
Related
new to this board, please bear with me.
I've seen a lot of similar threads to my issue but I still can't find a solution so I decided to see if I could get some help here.
The majority of the code was done by someone else -- I'm not a coder / developer by any means so I'm basically doing damage control with my limited knowledge. If you look at the CSS you'll see that the guy did a sloppy job.
Here's a link to one of the pages: http://bumbu.com/recipes.php -- but the issue applies to the whole site. It is regarding the navigation, and is in the style.css (line 108-231) (possibly the header html as well)
Issues:
There are two dropdowns - one under 'the Blend' and one under 'Cocktails', when you mouse on the Blend dropdown and mouse away the dropdown glitchily appears on the left side of the screen and is overlapping somehow.
The whole navigation is positioned using a really stupid system of margin-lefts and padding on multiple classes and when I change one thing it messes up the other. You can see that the dropdown on Cocktails isn't positioned perfectly to the link and the yellow bar hover state.
There are also some really stupid breakpoints (around 1025px and 990px) that you'll see are also messing up the dropdowns to the point you cant even click the dropdown links. When I give new CSS to the breakpoint it messes up the desktop state and vice versa.
I've tried messing with all the different navigation and drop down CSS by trial and error and when I get one thing right something else messes up. Since the site looks good to me otherwise I don't really want to re do all the code for the nav from scratch. Any help would be useful. Thanks in advance!! If there's more info I can give that can help let me know.
Screenshot of the issue:
(source: bumbu.com)
I don't know why the developer has used margins for alignment, which is a worst practice. But this fixes it:
.sub-nav2 {
transition: opacity 0.4s ease-out;
position: absolute;
text-align: left;
margin-left: -108px; /* Change this here. */
margin-top: 90px;
}
You may need to do some tweaking with the 108px. What I see is:
Solution for Skipping
/* Line #185 */
nav ul ul {
padding-top: 5px;
margin-top: 85px;
}
/* Line #195 */
.sub-nav2 {
margin-left: -108px;
margin-top: 85px;
}
Background
I'm a real green-bean when it comes to CSS (as in I started like a week ago) and have been assigned with the task of constructing our company's homepage. A heads up: I have 0 experience in web development, and when I say 0, I mean that one week ago I thought that CSS was the design world's terminology for object oriented programming and not that it was something you actually write and code in. But it's all fun to learn new things through SO/WC3/Google but I have run into an issue I can't get a grip on.
Issue
We're using Joomla as a development kit and specifically the Beez_20 template. As a reference for the issue I'm having I have uploaded a picture here. The parentheses show which css file it is located in. I want to put the banner (div.logoheader) adjacent to and below the menu (ul.menu) and avoid the white space in between them (which is the background of div.header). I've seen several posts about how to use position:relative and position:absolute but I can't get that to work when I have the css code in separate css files.
Trial and error
What I've done so far is to make the following changes:
Removed the max-width so that the menus and backgrounds stretch over the entire page
Put the div#line position:absolute; so that it is always on the top of the page
Put the ul.menu position:relative, and top:35px left:-10px to put it exactly below the div#line (why this isn't 0 0 I have no idea but it works this way)
Put the div.logoheader position:relative;
I've tried switching between relative and absolute but I can't seem to get it working. I always end up with a white space between the logoheader and the ul.menu. The tips I've seen is to use both relative and absolute but I don't know how to work that out when the images and elements are located in different css-files.
Other
I've noticed that the ul.menu disappears if I change the div#line position from absolute to relative. The div#line then ends up at the bottom of div.logoheader. If I comment out the section in personal.css and position.css the other elements still remain in the same positions.
I'm thinking that this is not something you solve in CSS but you should go into the PHP file but that is just me stabbing in the dark. Grateful for any help I can get on this issue, and let me know if there is additional information that is required.
EDIT: Fixed link
Try keeping the relative position for the div.logoheader and also adding bottom: 35px;. This should push it up. It's not the best method, however without seeing a live preview of the template, it's rather hard to give a more accurate answer. So your final code should look like this:
div.logoheader {
position: relative;
bottom: 35px;
}
You may need to change the value 35 according to the spacing. Hope this helps
What I'm trying to do:
I want to create text that can "float around" other text; I believe Callouts are the term. Since I'm new to CSS, I don't know where to start. If someone could kick me in the right direction, I'm sure I can explore further (and dutifully log it here).
Additional thoughts:
I'd like the 'highlight text' to still be a part of the narrative
flow of the posts/pages (nothing trapped outside the content).
I don't even know if this is a CSS or PHP thingie.
As I've been trying to do everything via child theme, I haven't even investigated
plugins. Is this wise?
A sample blog post is here.
Many thanks, in advance, for any guidance.
To get things going with how I'm interpreting your request, you'd want to the following to your H5 tag:
Float it (left or right)
Specify a width
Specify padding so items that are 'wrapping around it' aren't touching it
h5 {
float: left;
width: 100px;
padding: 0 20px 20px 0; /* shorthand for: top, right, bottom, left */
}
(Tried to make an image to showcase this, but apparently my rep. isn't high enough to help that much ;)
When you float things though, you take them out of the document's vertical flow, so depending on how this will be used you may want to investigate things like 'clearfix' or clearing a float if you need the height of the callout to be respected. (Like if text isn't intended to wrap past the callout, your callout may overlap your footer or something odd like that.)
I can elaborate further on a fix if you provide some more info. In your sample post, what would be a call out?
I have a site in development here:
http://63.144.105.101/perfect-card-creator-step-3
(This page won't display everything unless you start from Page 1), but the elements are still showing their problem).
I want the section where you choose the type of credit card (Visa, MasterCard, etc.) to be up higher, lined up with the preview of the credit card. These are tables nested within tables, pulled from an old site. Everything is working as it should except for this unusual stacking behavior. I've tried adjusting the styles but to no avail. Need another pair of eyes on this.
vertical-align: baseline; seems to be the problem. Change it to vertical-align: top and you're good.
The offending line is in wp-content/themes/perfectplastic/style.css, and is in the first few lines.
Since you probably don't want to break everything else, just add a class to the table you need and define vertical-align for that class.
Setup
I have a website that draws RSS feeds and displays them on the page. Currently, I use percentages on the divs that contain each feed, so that multiples can appear next to each other.
However, I only have two next to each other, and if the window resizes, there can be some ugly empty space on the screen.
Desire
What I'd like to be able to do, but have not figured out a way yet, is to put all the feeds linearly into the page, and have:
a 'pre-built' multicolumn view where the feeds would "balance" themselves into the columns
which leads me to:
the number of columns change depending on how wide the screen is currently\
This is akin to how word processing applications handle columnar layouts.
Question
I presume that I will need to implement some form of AJAXy happiness, but currently know very little about Javascript.
Is there a way to do this with just CSS/HTML/PHP?
If not, how should I go about solving this?
final solution:
(based on #warpr's and #joh6nn's answers)
#rss
{min-width: 10em;
max-width: 25em;
min-height: 15em;
max-height: 25em;
font-size: .97em;
float: left;
}
You probably cannot get what you want with just CSS/HTML, but you can get somewhat close.
A trick I used for a photo album is this:
Make sure each feed has a fixed width, I would recommend something like '20em';
Make sure each feed has the same height.
Float everything left.
Because each div has the same dimensions, when they're floated left they will form a grid with exactly the number of columns that will fit in your browser.
Unless you actually fix the height of the divs and use CSS to clip the content, you will need javascript for step 2, what I did was:
Iterate over each feed div, finding the tallest div.
Iterate over each div again, changing the height to match the div found in the first step.
This is fairly easy to implement, but is obviously not optimal. I look forward to reading any better solutions posted here :)
you might be able to do this with lists; i've never tried it, so i'm not sure.
if you make list items display:inline, the list becomes horizontal instead of vertical. from there, if you stuff the list into a containing element and fiddle with the padding and margins, you may be able to get the list to line-warp, like text: again, i've never tried that, so i don't know.
if this technique works, i'd be very interested to hear about it.
The only way I can think of is a mixture of dynamic CSS and javascript. Every time a column (feed) is added, use the javascript to rewrite the width (in percentage) of each div.
jQuery would come in handy here.
var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");
Someone feel free to correct me if I'm wrong. My jQuery is a little wobbly.
Of course, if you're not using AJAX, you could implement the same solution entirely in PHP.
You could also use this jQuery javascript (you will need the jQuery library).
var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
$(this).width(colWidth);
});
Which would set the column width dynamically.
For this to work your columns should have the class 'feed'
EDIT:
You should style your divs something like this:
.feed{
float:left;
}