I have a HTML template which uses various div structure. Now I have to create this into a wordpress theme. I am a bit confused with this. I am attaching the design here
So all the pink borders are divs. Now Do I put the whole content in the wordpress page, or is there a better way of creating the template? I was hoping that I just put the contents in the ADD PAGE area. and it would automatically take the alignment. All the black lines are contents(text). This is the design of a single page. Any idea of how make the template so that the contents are aligned automatically?
I assume that the image together with the 3 divs next to it all belong to one subject?
If so you could use a custom post type and then adding different meta boxes for those different divs. Another solution would be using shortcodes like so [divone][/divone] [divtwo][/divtwo] you can create those with the following code:
function divone_func($atts, $content="") {
return '<div class="one">'.$content.'</div>';
}
add_shortcode('divone', 'divone_func');
This code goes into your functions.php file, in your style.css you can style the div with the following code:
div.one{
/* your CSS here */
}
More reading:
http://codex.wordpress.org/Function_Reference/register_post_type
http://codex.wordpress.org/Function_Reference/add_meta_box
http://codex.wordpress.org/Function_Reference/add_shortcode
Related
I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
I'm working in wordpress, and I am having a bit of trouble.
As you see: in the page "articles" managed with page.php, it shows the categories widget at this point (see image 1),
Then, inside the page "articles", if you click in any subpage, managed by single.php, the categories widget should appear in a different position.
(image 2 is where it should appear and image 3 where it appears). I'm using a plugin to be able to manage structures through the dashboard, so I need to do it inside a php file.
Image 2:
Image 3:
I'm trying to include:
if ( is_page_template( 'single.php' ) ) {
echo '<style type=\"text/css\"> #sub_categories_widget-2 { margin-top: -150%; } </style>';
positioning it in my single.php or in my page.php but nothing seems to happen. Does anyone know what I'm doing so wrong? I make the widget appear though a plugin that creates a shortcode and I can add it in the editor.
Thank you
What you are doing can be achieved with css.
If you are in a single.php file, you should probably have a single class on your body or html tag. If not check this out.
So with this class at the top, now you can target your widget by page, single, page template etc...
.widget {
margin-top:0;
}
.single .widget {
margin-top: 300px //or whatever the height of the image;
}
What you want to do can be simply done by Javascript.
in jQuery use this code.
$('#id_name').css('property_name','property_value');
if you want to add class on particular element you can use .addClass method
$('#id_name').addClass('class_name');
Good Luck!
Hi guys i've been working for this for days and searching the net for help but unluckily I don't find one. Here's my problem, I know that wordpress has a built-in background image when you click the appearance. I also tried editing in the CSS but when I put the code
background-image: url(image/3.jpg) in the body but when I see it it didn't appear. I think that the theme Accelerate has a code that has a fixed white image, How is this?
Their may be background image or no back ground image in wordpress according to the theme you are currently working with. Anyway you can add background image inside the body of a page in wordpress by the following ways :
Select css class from "main.css" located wp-contents/themes/your-current-theme/css/main.css, inside css edit "body" as
body{
/*...propeties..*/
background-image:url(back-img-url);
}
if it overridden by default images of your theme can use this instead of above
body{
/*...propeties..*/
background-image:url(back-img-url) !important;
}
In case you are using a custom template inside wordpress find the body class from the css you are using and change this as above.or using image inside page with img tag then make direct changes for this.
I resolved this by clicking Theme Options -> Design and choose the "Boxed Layout" instead of Wide Layout
I am using a Wordpress theme named KALLYAS, and I am having trouble adding CSS to a specific class. This theme uses multiple shortcodes. So lets say I want to add a background with CSS to the gray area on the homepage only WITHOUT EFFECTING THE GRAY AREA ON ANY OTHER PAGE. also how would I go about adding CSS to a shortcode on a specific page aswell? I am guessing it is same way.
That worked because if you notice on the code in the theme preview it says :
<body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true">
it would also work if you used any of them like :
.page-id-17 .greyarea { color:#ccc }
.home.page-id-17 .greyarea { color:#ccc }
You need to scope your CSS if you want it to just display on one page. Grab a unique class or ID from a parent on that page, and place that in front of your css selector.
Ex
.uniqueClass .greyarea { color:#ccc }
I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;