Your help would be immensely appreciated and thank you in advance to the audience.
I am having a small problem of CSS and .tpl files. I am currently building a site for a client using weebly cms. Which is great. However they are now using 'less' instead of normal css. This means they have partials and variables included now. Which I am unfamiliar with. I simply want to align some text to 'center' which is always a straight forward process in traditional CSS. In this case. the div class for the text in question lies within the .tpl file in 'partials' There is no class associated with the text in the normal CSS file.
I'd like to know if I could add the class within the normal CSS from the .tpl file. I have tried using the same class name from the .tpl within CSS using id tags and class tags i.e # and .
However with no success. Im sure it is relatively straight forward but I cannot get my little head around it.
Any help would be superb, Happy new year all!
Thank you
This is the .tpl code in question, as you can see the class names are simple.
wsite-com-product-price
wsite-com-price
wsite-come-catergory-product-price
<div class="wsite-com-product-price {{price_class}}">
<div class="wsite-com-price {{!
}}{{^is_featured}}wsite-com-category-product-price{{/is_featured}} {{!
}}{{#is_featured}}wsite-com-category-product-featured-price{{/is_featured}}">
{{{price_html}}}
</div>
The CSS relating is this: the first line is my attempt at making this work:
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
I simply would just like to align the price to center:
The following is the HTML from view source on the page, (how i found the class names, but they are in .tpl file not the css!)
<div class="wsite-com-category-product-name wsite-com-link-text">
Merola Choker 1
</div>
</a>
<div class="wsite-com-product-price ">
<div class="wsite-com-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
<div class="wsite-com-sale-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
</div>
</div>
</div>
<div class="wsite-com-category-product wsite-com-column " data-id="5">
<div class="wsite-com-category-product-wrap ">
THANK YOU SO MUCH FOR ANYONE INTERESTED!
CORRECT ANSWERS SCREENSHOTS BELOW>>> THANKS!!!!
Try to use:
.wsite-com-category-product-price {text-align: center;}
As combinations of other classes might not always work.
Or:
.wsite-com-price, .wsite-com-product-price, .wsite-com-category-product-price {text-align: center}
To cover all price related classes.
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
Here .wsite-com-price is expected to be parent class, which is not there in your tpl. (or did i missout).
.wsite-com-product-price, .wsite-com-category-product-price {
text-align: center;
}
Try this if, this works, they you missed the parent class.
Related
So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")
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)
Okay, bear with me because I'm new to WEB development.
I have an MVC 4.0 Web API application using Razor and Entity Framework 5 (C#).
One of my links takes me to a page which displays data from the EF.
I added an HTML button to this page called "Export to Excel."
I want to center this button on the screen, above the report results.
What is the correct approach for this and how do I do it? I need to understand the PROPER architecture for files and code.
Do I use CSS? If so, where do I store the file in the solution? How do I use it on my page?
Do I do something specific to Razor?
Should I simply use HTML tags like
Again, all I want to do is center a button on the web page.
Can someone help me with a step by step process to do this correctly?
I'm just having a hard time figuring out where to put code and files (basically how to structure the application properly).
You can use CSS.
.centerAlign {
text-align: center;
}
In your view you can then apply the centerAlign class to the button:
<button class='centerAlign' />
You can also make a custom HTML Helper that will automatically apply the class for you.
namespace YourApplication.Helpers
{
public static class ButtonExtensions
{
public static string ButtonCenter(this HtmlHelper helper, string value)
{
return String.Format("<button class='centerAlign'> {0} </button>", value);
}
}
}
Then in your view you could do:
#Html.ButtonCenter("Click me");
I know there is an answer, but this is a really common way to center objects margin: 0 auto. Since the answer by itself doesn't really explain, I'll provide some detail.
When you build your View it is marked as a .cshtml file. Your View will contain a series of HTML or Hyper Text Markup Language. What you are doing is utilizing a particular Element called a div. These are used to help build a structure or layout for your site.
<div id="Origin">
<div class="origin-container">
<div class="header-style">
<div id="Origin-Header">
<div class="header-container">
// Inside Header Elements
</div>
</div>
</div>
</div>
</div>
So essentially this is a Site Structure. You'll notice that I have a tendency to inner-wrap a lot of my Elements. That is because it makes it easier to customize and style my layout, making it more customizable.
If your thinking "How is it more customizable?" Your partially correct, this HTML is simply a structure- The customization will come from your Stylesheet, Cascading Stylesheet to be exact.
Your HTML will call this Stylesheet to help adapt your layout to give a consistent appearance. So if you'd like to center your header you would put in your stylesheet:
#Origin-Header {
margin: 0 auto;
}
What the command is stating is three things:
Margin: These are the page margins.
0: Is the pixel difference for Top and Bottom.
Auto: The left and right pixels.
So rather then a top, bottom, left, and right they are all merged together in the short-hand. You'll have a lot of additional control to your layout as well through your stylesheet. Bare in mind that this is manipulating those div tags. If your trying to align a particular object, it would work identical but rather then focus on the element- You would point it to your html object.
But I hope that helps.
I do not know if it is good practice, but the only way I have been able to center entire controls like a button in HTML was to do something like
.btn{
margin-left:auto;
margin-right:auto;
}
I have been able to center the control by setting the button's class to "btn" and using the above css. The text-align property has never really worked for me in HTML.
Try this:
[i guess is this what you are looking for]
check LIVE DEMO on jsfiddle
HTML
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmRed">
your report here...
</div>
<center>
<button>DoIt</button>
</center>
</section>
<h1>::::::OR:::::</h1>
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmBlue">your report here...</div>
<div style="text-align: center;" >
<button>DoIt</button>
</div>
</section>
<h1>::::::OR relative:::::</h1>
<section class="iHaveBorder iFeetIn">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmGreen">your report here...</div>
<div class="iWant2BeCenter">
<button>DoIt</button>
</div>
</section>
CSS:
.myWorderfullDiv{
height: 80px; width: 200px;
}
.iAmBlue{background-color: blue}
.iAmRed{background-color: red}
.iAmGreen{background-color: green}
.iHaveBorder{border:2px black solid;}
.iFeetIn{display: inline-block;}
.iWant2BeCenter{text-align: center;}
check LIVE DEMO on jsfiddle
So I was wondering if anyone knows of a package/plugin for sublime or a service that lists class attributes within an HTML snippet.
For example I like to markup then work on the css. I keep finding myself splitting sublime into two halves and just manually scrolling through the HTML on the left and rewriting the the actual class name styles on the right.
Basically I have:
<section class="home-testimonials">
<h2 class="home-title">
<span>Testimonials</span>
</h2>
<div class="testimonial-wrapper">
<!-- Other divs with classes -->
</div>
</section>
And I want a list like this:
.home-testimonials
.home-title
.testimonial-wrapper
If it denotes hierarchy position even better. Thanks in advance!
I'm not sure about Sublime, but with regular JS you can select all elements with document.getElementsByTagName('*'), and then extract classes for each element with element.className.
I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/