I have a lot of sub pages and latest 3 I am showing at homepage, I could display only title but image can't(every sub page has TV named 'image_prew' and I am trying to get value of this TV for image), here is my code:
<div class="cat">
<div class="role">
<h1 class="[[+pagetitle]]">[[+pagetitle]]</h1>
</div>
<div class="menu_prew-[[+pagetitle]]">
<img src="[[*image_prew]]" class="image"/>
</div>
<div class="clear"></div>
</div>
You don't say how you're fetching the sub-pages, but if you're using getResources you need to use the parameter &includeTVs=1.
And as Sean mentions above, in a template chunk TVs are placed in a placeholder tag -- use a plus sign not an asterisk.
try [[+tv.image_prew]] and check the documentation near the bottom "Displaying Template Variables with getResources" is clearly labelled
What is your output setting on the TV? Whenever you are outputting image source urls in your TVs, make sure in your output setting tab the output is set to "text". You want the text to render to your html tag. Default may or may not work depending on your input type setting, so I always force this to "text". I have had that issue once or twice;).
Related
I'm looking for the method to put a label and text in a div, within a class.
I have this html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
I want to put the label 'phone' within a div class and, if necessary, the text after it in a div class.
Basically the aim of this is to be able to select the label 'phone' and the text after it, and give it a background color.
I don't know where I would insert it in given html, or even what it would lool like?
Im guessing somewhere after 'Anonymous,'
so:
Anonymous</a> div class="Phone:"><label>Phone:>.
</label>
and then continuing with existing code:
<br/>label><Phone:></label>7576XXXXXX
<br/>..........
First of all, I would suggest you go through some basics of HTML. This would be a good start: https://www.w3schools.com/html/
Now coming back to your question, you could enclose it like this:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<div class="phone"><label>Phone:</label> 7576XXXXXX</div>
<div class="location"><label>Location:</label> London, UK</div>
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
Here, I have removed the <br> because you were using it to make that Phone and Location display in separate lines. Since we are using <div> tags are block level element by default, the contents of it will be displayed in separate lines.
So, now you can change the color of those two boxes like this:
.phone{
background-color: red;
}
.location{
background-color: yellow;
}
And lastly you asked about how to do this in Wordpress. As you may already know Wordpress uses Themes, you have to check which one is your current theme (the one that is running in your website). This can be checked via visiting Wordpress Admin Panel --> Appearance --> Themes. You will see the current active theme's name in that page. Now you have to use an FTP Client or the File Manager in your cPanel to access the following the location: /wp-content/themes/yourthemename/ in your server. Here, youthemename is the name of the theme that you noticed in the previous step.
Once you are in that folder, you would see a bunch on template files. I would suggest taking a close look at each file if you are unsure. Or its better you get a basic idea of Wordpress first before editing it. Take a look at this: https://developer.wordpress.org/themes/basics/template-hierarchy/
Once you find out the template file has this HTML code you wanted to edit, simply open it and make the changes and save it. You are all done. If you are using any Cache plugins in your Wordpress, you might need to purge the cache if you don't see the changes when accessing the webpage.
That being said, my writeup might give you a small confusion. That's why I suggested to have a look at the basics first. Otherwise you have to hire someone who would be ready to do that specific changes for you.
Hope it helps.
I am using the bootstrap plugin with an inline ckeditor. When I try to add in a responsive layout (in this case columns) I get code that looks like this.
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
<p> </p>
Whenever I click in one of these columns via ckeditor and type everything works fine, when the text reaches the end of the column it continues on the next line and is formatted as expected.
example http://jsfiddle.net/gwbsp5dc/1/, this looks exactly as it should.
However if I am typing and press the enter or return key, instead of adding a new line or < br> tag like this http://jsfiddle.net/gwbsp5dc/2/ it adds a whole new column like this http://jsfiddle.net/gwbsp5dc/3/
This problem is only happening when specifically using responsive layouts and columns, when I press enter on a regular ckeditor instance it adds a
<p> </p>
to the source. If I were to add the above or a < br> tag in the source the formatting works perfectly.
I had to change the enter mode for ckeditor, it was picking up the parent container and copying it.
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-enterMode
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
This is going to drive me crazy at this rate. From inside of a Layout.cshtml file for a theme in Orchard, how can I determine the Title of the main body's contents?
I've tried using the Shape Tracer but it doesn't seem to help. None of these give me any text at all.
#Html.Title()
#Model.Title
#Model.Content.Parts_Common_Body.ContentItem.TitlePart
#Model.ContentItem.Parts_Common_Body.ContentItem.TitlePart
UPDATE:
Here's the HTML which should show what the end result needs to look like to keep the theme intact, along with a picture showing the theme before I started with it. This HTML is just a snippet of the parts that I'm concerned with. In the picture, the search is what is in the ContentHeader zone.
<div id="wrapper-header-inner">
<div id="header-inner">
#Zone(Model.ContentHeader)
<h1 class="pagetitle">
Title Here
</h1>
</div><!-- #header-inner -->
</div><!-- #wrapper-header-inner -->
}
<div id="wrapper-content">
<div id="content">
#if(Model.Content != null) {
<div class="main" class="#mainContentClass">
#if(Model.Content != null && Model.LeftAside == null && Model.RightAside == null) {
<div id="maincontentFull" class="positionleft">
#Zone(Model.Content)
</div>
}
#* Other layout possabilities if left and/or right asides are present *#
</div>
}
</div>
</div>
As a follow up, updates to Orchard since I have asked this question included the ability to use the placement.info file to reroute certain parts to other zones, in effect letting me accomplish what I was looking for.
<Placement>
<Match ContentType="Page">
<Place Parts_Title="/TitleZone"/>
</Match>
</Placement>
From Layout, Model is the Layout object. It has nothing to do whatsoever with whatever content is going to get rendered into the Content zone, but it does have a Title property that should be set by that content. It is not exactly what you are asking for though: it is what will end-up being the HTML title.
If you want to get to the title of the item that gets rendered into the top-level Content zone, well, Layout is really not a good place to look for that. I would need to know more about what exactly you are trying to achieve but this seems backwards. In fact, you can't even assume that there is one such content item, or that there will be only one.
So what is it exactly that you are trying to do?
Does this work for you?
#Html.Title()
That should work if you're looking for the page title. However, if you're looking to directly access the TitlePart...
#Model.Title
This works because if you look in the Parts.Title template there is a line of code that does this...
#{
Layout.Title = Model.Title;
}
See place 1,2 and 3.
<body>
<Place 1>
<div id="container">
<Place 2>
<div id="header">
<Place 3>
<div id="logo">
</div>
</div>
</div>
</body>
'Skip to content' and 'Skip to menu' links should be placed before any other link or text. It doesn't matter if there are 15 opening div before them.
The relevant Technique for WCAG 2.0 is G1: Adding a link at the top of each page that goes directly to the main content area
I prefer on the top. In this case, it is more useful.
See following sample
http://www.w3.org/WAI/
http://websitetips.com/
It will no doubt vary from site to site, but I would put it before the navigation.
That way a screen reader can read out 'Skip to content' before it has to go through the main navigation list and say things like 'About Us. Links. Contact Us.' etc
Shouldn't place it at all -- place your content first in the HTML file, and put navigation/spammy stuff afterwards.
(I know a lot of places find this difficult in practice, but if you're going for screen reader/text-only browser support, you might as well go all the way)