I know that you can't put a link inside a link, but how would link a button inside of an already linked ? I'm trying to recreate the aside on the pcfinancial website.
Here is what I did which I know is incorrect:
<a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
<article>
<img src="images/first-article.png" alt="Introducing the new PC Money Account">
<p>Financial Fluency</p>
<h3>Introducing the new PC Money™ Account</h3>
<p>By PC Financial Team</p>
<p>Read Article</p>
</article>
</a>
Now how does one get the button for "Financial Fluency" that is linked in the article like it is on this website: https://www.pcfinancial.ca/en/
I'm in a coding course and had to recreate this in HTML. We have not begun CSS yet.
Thank you.
Try to remove link on a top of <article> link and put its on your <img> <h3> and <p> tags like this:
<article>
<a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
<img src="images/first-article.png" alt="Introducing the new PC Money Account">
<p>Financial Fluency</p>
<h3>Introducing the new PC Money™ Account</h3>
<p>By PC Financial Team</p>
</a>
<a href="YOUR_LINK_HERE">
<p>Read Article</p> <!-- and use <button> element if you think it is a button-->
</a>
</article>
Related
Quite new to Drupal theming and need some help editing the markup a view outputs.
I know I have page templates, node templates, block templates; but what about views?! I choose the fields that are displayed in the results using views UI but that doesn't let me customise the outputted markup I want.
So for example, instead of this:
<div class="band propertysearch-results">
<section class="layout">
<ul>
<li>
<div><img src="" alt=""></div>
<div>
<h3>Location Name</h3>
<small>123 Leather Lane, London, NW1 123</small>
<p>oremque ad laborum et reiciendis eos quasi odit!</p>
</div>
<div class="results-info">
3 <span>Rooms</span>
View
Save
</div>
</li>
</ul>
Drupal is giving me:
<div class="view viewproerties">
<div class="view-content">
<ul data-thmr="thmr_46">
<li class="">
<div class="views-field views-field-field-photo" data-thmr="thmr_43">
<div class="field-content">
<img typeof="foaf:Image" src="http://findabode.d7/sites/default/files/mvenue1.jpg" alt="" data-thmr="thmr_16 thmr_17 thmr_18">
</div>
</div>
<div class="views-field views-field-title" data-thmr="thmr_43">
<span class="field-content">Leather Lane</span>
</div>
<div class="views-field views-field-body" data-thmr="thmr_43">
<div class="field-content"></div>
</div>
<div class="views-field views-field-field-rooms-1" data-thmr="thmr_43">
<span class="views-label views-label-field-rooms-1">Rooms: </span> <div class="field-content"><span data-thmr="thmr_22" class="devel-themer-wrapper">2</span></div>
</div>
<div class="views-field views-field-view-node" data-thmr="thmr_43">
<span class="field-content">view</span>
</div>
</li>
</ul>
</div>
</div>
So my question is how to I customise the outputted markup and how do I figure out what the variables for each field is called?
Do I make these changes in a tpl file or somewhere else?
Theming the output of views in Drupal is somewhat tricky, depending on the types of fields you have used and the kind of output style you have chosen to create the view.
You will need to learn about Views Templating in order to override the specific templates that your particular view is utilizing to render the output.
In order to customize the output , you need to implement custom template for views , that would override the default rendering of views
If you are creating a view, then views let any theme to overwrite at different levels
Display Output
Style Output
Row style output
Field Content
Here is the quick tutorial on how to theme views
Overriding drupal views
You can also use the Views interface to adapt the markup to what you need:
With the Style Settings you can alter the field markup including its container and label:
Or you can use the Rewrite Results to customize your markup and using tokens for the fields values.
I am encoding the link contained in a RSS in this way:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
the above is returning the link of such rss in text format, for example like this:
http://feedproxy.google.com/~r/EuropeanRailwayReview/~3/0pxP3t3rge8/
but as text not as clickable link.
Is there a way to get it returned as a hyperlink that can be clicked to navigate to the relevant address? Or, even better as something to click without showing the url?
Try this:
<div class="link">
<span> <%# System.Web.HttpUtility.HtmlEncode(XPath("link").ToString())%> </span>
</div>
Or this:
<div class="link">
<span> Link to Article </span>
</div>
I'm trying to build a Wordpress theme, using media queries for responsive layout. I have some issues around getting the correct layout whilst maintaining some semantic mark up.
Basically, for the post date in pages less than, say, 764 pixels wide, I want to have the date, bullet, and post category displaying inline; if the page is above this size, then the post date should display as a column (entry-date), alongside the main post column (main-column).
I think I've managed to get there, but just wondered if this html code was valid, as I've tried to keep header and footer sections within the post to make it make sense semantically.
Does anyone have any feedback?
Thanks,
John
<article class="post">
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
<div class="main-column">
<span class="bullet">●</span>
<header class="entry-header">
<span class="entry-category"><a href="#">Cars</span>
<h1 class="entry-title">A new car from Ferrari</h1>
<span class="entry-authors vcard">by John Smith </span>
<div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div>
</header><!-- .entry-header -->
<div class="entry-content">
<p>Ferrari have released a great new car, which is very fast.</p>
<span class="continue-reading">Continue reading</span>
</div><!-- .entry-content -->
<footer class="entry-meta">
<span class="entry-tags"><a href='#'>Sports cars</a></span>
</footer><!-- .entry-meta -->
</div>
</article><!-- #post-1234 -->
The comment's are completely off, validation has nothing to do with semantics, that's a totaly different subject. Semantic is about giving meaning to your code.
Currently you have this
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
This would be more semantic, avoid using unnecessary tags(don't add tags only for styling, look for css solutions).
<div class="entry-date">
30<sup>th</sup>Sep 2013
</div>
I'm trying to integrate CSS pagination into a thumbnail gallery I have set up on my site. So far, I haven't found any tutorials pointing to how to customize pagination into a existing script.
From what I see out there, there are a lots of great CSS pagination solutions. Here's a page with lots of pagination stylings (no plugins, integration seems to be very general so any will do). I've downloaded a few in hope that a tutorial directs me to what I want but have had no luck so far.
My code is taken from Pure CSS image gallery. I had a look at integrating Gallerific but found the instructions difficult, and so I'm looking for a pure CSS solution.
At first I wanted to used multiple div's for the same gallery, much like Gallerific, only to find JavaScript (or some kind of jQuery solution) would be needed to connect the links necessary for the gallery to work like that.
Currently, the gallery is contained within one div (the way it has to be in order to work). I'm looking at adding pagination just on the thumbs e.g. "...<a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" />
..."
And here for purpose of the post is my code so far:
<div id="gallerycenter">
<ul id="gallery">
<li>
<a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" />
<span><img src="images/img/01.jpg" id="prev01" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev02"><img src="images/img/thmbs/02.jpg" alt="" class="thumb" />
<span><img src="images/img/02.jpg" id="prev02" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev03"><img src="images/img/thmbs/03.jpg" alt="" class="thumb" />
<span><img src="images/img/03.jpg" id="prev03" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev04"><img src="images/img/thmbs/04.jpg" alt="" class="thumb" />
<span><img src="images/img/04.jpg" id="prev04" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev05"><img src="images/img/thmbs/05.jpg" alt="" class="thumb" />
<span><img src="images/img/05.jpg" id="prev05" class="showcase" alt="" /></span></a>
</li>
</ul>
</div>
The only thing I have thought of but haven't tried is changing the ".thumb" to ".pagination" in order to start the "pagination" in a class form but still, that doesn't give me enough to go on
Can anyone help me piece together the possibilities or confirm that I'm crazy and I'm asking way too much of CSS?
You've misunderstood the link you posted. It is providing style only, not functionality, because CSS does not provide this functionality. Pagination is not a matter of adding style to a page, it is achieved programatically, either server-side or in client-side JavaScript. You should pick an existing jQuery pagination plugin and use it, you will not find a solution which uses only CSS to provide pagination as that is fundamentally not what CSS is for.
If I unput a certain piece html into my page, it seems to be truncating:
<div id="slideshow">
<img style="cursor: pointer;" src="files:img/slideshow/3.png" id="left_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/1.png" id="center_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/2.png" id="right_slide" alt=""/>
</div>
It all looks good in the preview, but when I save it it becomes:
<div id="slideshow">
<img style="cursor: pointer;" src="http://local.drupal.com/sites/default/files/img/slideshow/3.png" id="left_slide" alt="" />
</div>
I'm at a loss! I'm not using any nasty WYSIWYG editors and the input format is full html. The second code example indicates that I'm using the path filter module but I've also tried disabling that and resaving. It still truncates.
I'm using Drupal 6.19.
You certainly print the teaser only.
To publish to the front page the complete node Go to Administer > Content Management > Post Settings > Choose 'unlimited' from the 'length of trimmed post' select box.
You can also manually controlling the teaser break point by inserting:
<!--break-->
If you use a views you can control if you want to show the complete node or the teaser in the settings of the view.