I am trying to style how the articles are laid out in a Category Blog and have got stuck on styling the actual content of the article.
My code for the first article on the Category Blog is as such:
<div class="items-leading">
<div class="leading-0">
<h2>
News Post 1
</h2>
<dl class="article-info">
<dt class="article-info-term">Details</dt>
<dd class="published">2nd Mar 2013</dd>
</dl>
Lorem ipsum dolor sit amet etc...
<div class="item-separator"></div>
</div>
I am trying to style the lorem ipsum example text by wrapping it in some kind of tags, either div or paragraph I don't mind, so I can give its wrapping container a div and font styling etc.
Here is a link to the site where its currently on:
http://test.studevent.co.uk/news
Any help is greatly appreciated.
You want to change default template for article item in blog?
/components/com_content/views/category/tmpl/blog_item.php - it is default template. copy it in your template (/templates/{your_template_name}/html/com_content/category/blog_item.php).
After, in your copy on line 137 you can find <?php echo $this->item->introtext; ?> - it is your text 'Lorem ipsum ...'
To do this, the file you need to edit is found here:
YOURSITEROOT/layouts/joomla/content/blog_style_default_item_title.php
In order to edit file, create a new folder (within your template) and move the file here, so it would be:
YOURSITEROOT/templates/YOURTEMPLATE/html/layouts/joomla/content/blog_style_default_item_title.php
Related
Long(ish) time lurker, first time poster! Apologies if this has been asked a 1000 times I am new to coding and I am currently working on a project with Codecademy and I was hoping someone would be able to provide some help...
I am tasked with replicating the layout you can see in the screenshot below. However I am unable to get any further as I cannot for the life of me get text to appear centered and to the right of the image. The closest I have gotten previously is the text will appear to the top right of the image. I am using a file for html and a seperate style sheet if that helps.
how it should look
how mine looks
This is my HTML code so far
<div class="flex-content" id="banner">
<img class="img2"><img src="images/banner.jpg"></div>
<div class="supporting-content">
<h3>Learn something new every day</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="button" href="#">Start here</a>
</div>
</div>
Any guidance would be hugely appreciated!
Alikin
use flexbox and "flex-direction: row;"
I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:
<div class='class1'> <div id='id1'> </div> </div>
It seems kind of heavyhanded to me having to write div class='' or div id='' , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.
You could try an HTML pre-processor such as HAML (http://www.haml.info).
With HAML, your code would go from this:
<div class='class1'> <div id='id1'> </div> </div>
to this:
.class1
#id1
And something a little more complicated like this:
<html>
<body>
<h1 class="heading title">Heading</h1>
<p class="paragraph description">Lorem ipsum dolor sit amet...</p>
</body>
</html>
could be written in HAML like this:
%html
%body
%h1.heading.title Heading
%p.paragraph.description Lorem ipsum dolor sit amet...
I'd recommend you to take a look at pug https://pugjs.org/api/getting-started.html
I've got an HTML page that has multiple footnote references that need to go to the same footnote at the bottom of the page. That is, I want 1 and 4 in body content to both link to the same block of text at the bottom.
Most footnote markup is a series of anchor links tied to ids, but by definition they relate one-to-one. Is it possible to do a one-to-many link in HTML somehow?
You can have a many-to-one relationship with anchor links and IDs.
That is, you can only have one instance of each ID, but you can have multiple links pointing to one ID.
<p>This will go to footnote 1.</p>
<p>This will also go to footnote 1.</p>
<p>This will go to footnote 2.</p>
<footer>
<p id="footnote-1">[1] A footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>
</footer>
To the people who came here for a solution for OpenHTMLToPDF:
Got it working by accident:
Lorem ipsum...
<div class="footnote" id="f-1">This is my first footnote</div><br/>
Lorem ipsum...
<div class="footnote">Second <strong>footnote</strong>!</div><br/>
Dolor sit amet...
<!--This is a reference to the same footnote as the first footnote -->
[1]
Created an issue on the github to get a solution or an addition to their wiki.
Okey, this is the code i have:
[lazy_load_box effect="slidefromright" speed="550" delay="80"]
[hero_unit text="Progressive business thinking
Lorem ipsum dolor sit amet, conse ctetur" btn_text="soporte 24/7 <br> 123456" btn_link="http://localhost/wordpress/donec-porta-diam-eu-massa/aliquam-erat-volutpat/" btn_style="primary" btn_size="normal" target="_self"]
[/lazy_load_box]
This is part of a code from a wordpress template, i tried to make a jump line here:
btn_text="soporte 24/7 <br> 123456"
But it doesn´t work it just write in the page:
SOPORTE 24/7 <BR> 123456
I hope someone know about this. I'm new working with templates.
Thanks for your time.
Because this line isn't supporting html codes. You should find the html source of this line. So, you can add the br tag after find it.
I would like my tinymce editor to allow all the html elements, include some nested kind.
I read the documents at tinymce: http://www.tinymce.com/wiki.php/Configuration:valid_elements
And also confirmed by this post on Stackoverflow: TinyMce Allow all Html tag
I use valid_elements :"*[*]", in my tinymce options:
$('.page-tinymce-editor').tinymce({
theme: 'advanced',
theme_advanced_buttons1: "fontsizeselect,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,code,image,uploadimage,uploadattachment",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
width : "660px",
height: "1200",
body_id :"article",
valid_elements :"*[*]",
skin: "wp_theme",
relative_urls: false,
content_css: "http://" + location.host + "/assets/screen.css",
plugins: 'uploadimage,uploadattachment'
})
But there's a nest condition in my html is still remove by tinymce. I have a piece of html like the following:
<span class="text">
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</span>
which becomes this :
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
Tinymce removes the span outside the p tag. Other span tag are all fine. I studied the tinymce over and over, but didn't come out any idea to fix this.
Is there way to fix it?
Thanks a lot
You will need to adjust the valid_children setting! I guess p-tags are not defined/allowed al child noddes of spans by default.
I think this could not be done on tinymce side. Here is the post talking about it at Tinymce forum: http://www.tinymce.com/forum/viewtopic.php?pid=98807#p98807
Try something like extended_valid_elements : '+span[p]', in addition to the valid_children setting discussed above. And make sure to clear your cache entirely to make sure its not serving your old config file.
This should allow p to be a child of span
More information on that topic:
Alan Storm on Magento TinyMCE
Pixafy - Overcoming Magento's TinyMCE
I know this is an old topic but it still ranks high in the search results so hopefully it will help someone.