I am currently tying to convert a HTML template to a WordPress theme. We need to assign two classes to the existing <h1> tag, which currently has a class of entry-title. We would like to change the h1 tag for: <h4 class="heading col">.
Can anyone tell me how to do this? Where is the code contained that creates this within WordPress?
Thanks!
You can change the markup of your H1 tag inside the header.php file of your theme, some more information on the structure of wordpress themes available on the link below.
http://themetation.com/2008/07/17/how-to-create-wordpress-themes-from-scratch-part-3a/
Related
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
I want to apply it to div tag of product image for a woocomerce site.
I think its applied using php(from woocomerce plugin) but I am new so have no idea.
///in css
.panel .panel-overlay, .panel .overlay-background{height: 60px; padding:10px;}
.panel .overlay-background{background: #222;}
.panel .panel-overlay{color: white; font-size: 0.7em;}
//want to add this to div
<li><img src="" alt="" />
<div class="panel-overlay">
<h2>Image Title goes here</h2>
<p>information about the image.<br />
</div>
</li>
Can anyone direct me
To change template from a plugin you should at least know basics of
Wordpress template Structure
Wordpress theme editing/development
To edit template of your Woocommerce Shop follow these steps:
Find out the template which you want to edit. (wp-content/plugins/woocommerce/templates)
Your case: Detect whether its a Single Product Page (single-product.php) or Archive Product Page or Shop Page (archive-product.php) as product image is usually on these pages. There are some nested templates included inside these template files. Check if the part you want to edit is not in some nested template. If it is open that nested template file and see where you want to make the modifications.
Once you've found the template where you want to make the changes. Copy the template from wp-content/plugins/woocommerce/templates to wp-content/themes/your-theme/woocommerce. If the template is inside any other folder in woocommmerce plugin create that folder too. You have to keep the directory structure same.
Make the changes in the template which you've copied to your theme inside woocommerce folder.
This template will override the default woocommerce template.
Note: In case you are using any woocommerce enabled theme. The template must be present in your theme folder already. Take a backup of theme before you edit template in that theme.
I'm working on a wordpress website.
I would like to know how to add a new div id or class in the_content loop for posts. That is, I don't want to add any html in the post edit area of the backend; what I want is to actually create a new div or class in the post, so that I have an img and then the text wrapped within a div.
In my posts I need to wrap the text paragraphs in a div, like so:
<div class="entry-content">
<p><....img...></p>
<div class="text">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
The div "text" is what I need to include. Could someone help me with this? I imagine I have to add something in the loop in function.php
thanks!
Generaly, you do not edit post content in the template, you just display it.
So to do this, you need to use Format option to add a "Title 1" or anything content related style to some text in the visual editor.
If you really want to add specific tag, use shortag annotation (or find a plugin to do this)?
If you just wqant to have an image asigned to a post, check the thumbnails feature of wordpress that let you get the post image from outside the content.
BTW : you should consider posting wordpress question on https://wordpress.stackexchange.com/
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)