I am using wordpress to generate a ul list, and I'd like the container div (that has background-texture) to stretch vertically, depending on how many li items user generates in Wordpress.
Code:
.black-bg-section {
background-color:#CCC;
}
#departments {
width:500px;
}
<div class="black-bg-section" id="departments">
<?php the_block('school-departments')?>
</div>
I guess it has to do something with the content to be generated by php. If I copy paste this into a new document and make an list inside that div, it works flawlessly.
Any help how to tackle this will be much appreciated.
Look for a div or some other element that is being generated that has the css property of: float: left; or float: right;. If there is one simply add this:
<div class="black-bg-section" id="departments">
<?php the_block('school-departments')?>
<div style='clear: left;'></div> <!-- or clear: right if that is what the float is -->
</div>
Related
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
I am creating a plugin. Settings will be saved in variable when user will enter any value. Here is code:
<div class="content" style="text-align: <?php echo $textalign; ?>;">
<?php echo $content; ?>
</div>
$content is wp page editor and $textalign is text-align (left, center, right) style.
I want to add an option of text-align for ul>li (if user add item list in page editor). If I write it in styling tag .content ul li {text-align: <?php echo $textalign; ?>;} then it will be apply. But I want to add it in inline style so it apply different for each php code for different settings.
It does't work directly style="text-align: <?php echo $textalign; ?>;" but it work writing like this .content ul li {text-align: center;}. So how I can add class using inline styling for specific attribute?
See the screenshot:
This you have to achieve with js. You cannot write such inline rule.
$(document).ready({
$('.content').find('ul li').css({textalign:<?php echo $textalign; ?>})
})
This is a PDF or HTML styling question: I want multiple text columns in my PDF.
I have a custom modification to PDFMaker's PDF Export tool for Vtiger. For the moment it looks as if I can only style inline in the elemnt style tag, generated from the php export module.
When using the text/code editor in the browser, my styles work fine. I am able to create text columns and everything looks great! (Thank to this genius! : http://jsfiddle.net/jalbertbowdenii/7Chkz/ ) ...I'm using this exact code, only inline.
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
But when I export to PDF, it will not render columns..it stacks my child divs.
*Note: I did change all percentages to fixed widths (pdf seems to not like percentages...not sure on this, but seems like it)
So, is there something special about styling for PDF's to make it recognize columns? Or is there a proven work around in CSS to achieve multiple text columns?
Thanks in advance, Stackoverflow rocks!
After a few days and no replies, here is what I found out. There are different PDF "classes" ( not sure how to define class in this context)... but it's the library of code that interprets different forms of code for rendering a PDF, I've seen PHP, JQuery and HTML.
For the answer to my question, I needed to know what HTML styles the PDF 'class' I was using would work. It turns out that the library/class I was using was called mPDF
This class had nice documentation of styles and attributes it supports:
Supported CSS
HTML attributes
After reading through the docs, it appears that the 'column-count' style is not supported as well as floats are limited. It appears I can not achieve the 'masonry' style layout I'm looking for (at this time).
QUICK UDDATE ON LINK 2021: https://mpdf.github.io/
Add to add multi column function in the mpdf use the following code
<columns column-count="3" vAlign="J" column-gap="2"/>
<!-- add the dive with text etc here-->
<columns/>
For more details you check this website https://mpdf.github.io/reference/html-control-tags/columns.html
I found this in php
.row {
display:table;
width: 100%;
clear: both;
}
.col-lg-4 {
float: left;
width: 32.83%;
border:1px solid blue;
}
and php code here
<?php
$d = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
$cols = 3;
$dRowLen = ceil(count($d) / $cols);
?>
<?php for($i=0;$i<$dRowLen;$i++){ ?>
<div class="row">
<?php
$z = $i*$cols;
for($v=0;$v<$cols;$v++){
if(isset($d[$z+$v])){
?>
<div class="col-lg-4">
<?php echo $d[$z+$v];?>
</div>
<?php
}
}
?>
</div>
<?php } ?>
I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/
I have a widget that is comprised of quite a few divs. I then use javascript to bring the widget to life and do what it is supposed to do.
It is positioned on the page above the main content.
The client feels having all the widget html above the keyword rich content is bad for rankings, yet visually this is how we want the page set up.
What are some options here to keep the widget positioned as we want, yet not clutter up the top of the page as it is crawled?
current setup:
-javascript file is called in head
-widget html, which is several divs, text, images, etc.
-other page content divs
You could include the widget at the bottom of the page, then use css to position it at the top. Make sure your main content has a top-margin equivalent to the size of the widget. As mentioned in your comment, you'd also need to position the widget sufficiently far down the page to avoid the header content. This relies on your header and widget having specified heights. Your html would be something like this:
<body>
<div class="header">The header</div>
<div class="main-content">The main content</div>
<div class="widget">widget</div>
</body>
Then your css could be something like this:
.header, .main-content, .widget {
height: 40px;
}
.header {
background-color: red;
}
.main-content {
background-color: blue;
margin-top: 40px; /* height of widget */
}
.widget {
background-color: yellow;
position: absolute;
top: 40px; /* height of header */
}
You can see this in action here: http://jsfiddle.net/W3RzU/
As bardiir pointed out, putting the widget code in the correct place would be much simpler and would have minimal (if any) impact on seo.