I have been trying to make a basic header for the homepage, for my webapp for some time now, I want to use mat-toolbar, but it will not set the way that I want it to. My code is as follows.
.maintooly {
background-color: rgba(0,0,0,.7)
}
<mat-toolbar color="primary" class="main-tooly">
<span id="product-name">
HOMEPAGE
</span>
<div class="vertical-line title-line">
|
</div>
</mat-toolbar>
This is a watered down example but essentially I am trying to add a header to the to top of the page so it would look like this:
But instead it is looking like this:
Summmary: cannot get items in header to display side by side and cannot get the color of header to change or really do anything.
What exactly am I doing wrong here and how can I make this work?
The solution was to put import the tool into app.module.ts file.
Related
im new to HTML and im just trying to edit a template at the moment. A Sign Up button on an unordered list has thrown me.
Heres some info:
On the template i had to change the link to a form button in order to integrate it opening up a part of the account system... After i placed the form button there it turned out like this:
https://gyazo.com/82c807d59162ada63dcaeea69b2fd340
The old code looked like this:
<li>Sign Up Now!</li>
And the new code looks like this:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</a></li>
I also had to insert this into the footer in the code to integrate it:
<script type="text/javascript" src="#"></script>
I've taken the links out just for anonymity.
Also the bottom part of the list where it now says "Sign Up Now!" is supposed to be green and then turn to black on the mouseover.
The CSS files from the template are quite extensive though and the section with all of the .btn CSS parts is just a long unstructured list thats hard to make sense of. And on top of that i cant work out how to link the form button to the .btn part of the CSS.
Thanks in advance for any help :)
Your markup has an incorrect closing tag for <button>. It should be:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</button></li>
One alternative is to add your custom css at the end of the CSS file.
Thay way you could add this class:
.order-button{
/* Styles for button here */
}
.order-button:hover{
/* Styles for mouseover here */
}
I created and ionic project using the command
ionic start sideMenu http://codepen.io/vialware/pen/ypoxd
I expected the app to be like what is shown below.
Nevertheless, when I run it something is missing, the menu button. It is being created I guess using in the header using this tag:
<ion-view title="'Welcome'" hide-back-button="true" left-buttons="menuButton">
I'm able to build and emulate the project without any errors and so I'm wondering whether I might have done something wrong and if anyone might have a hint on how to solve this problem (I'm new to both Ionic and AngularJS).
You can also use this :
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Title!</h1>
</ion-header-bar>
But don't forgot to put has-header to your content or your content will be behind this header bar
<ion-content class="has-header">
// Content
</ion-content>
In order to have that specific header, here's what your code should look like:
<div class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Welcome</h1>
</div>
Note that the bar-positive class is only setting the blue color background on the header.
In my case, the change I made is, added attribute enable-menu-with-back-views="true" as below. Then sidemenu button and content is shown in all views.
<ion-side-menus enable-menu-with-back-views="true">
Please refer below link:
http://ionicframework.com/docs/api/directive/menuClose/
How are you running your app? If you are just opening your index.html plainly on a browser it most probably won't work... Try running it using localhost (local web server).
Assuming this is true... You need to turn IIS Server on and run your site there
If you don't know how, you can try this tutorials below.
http://www.iis.net/learn/install/installing-iis-7/installing-iis-on-windows-vista-and-windows-7- https://www.youtube.com/watch?v=dZAbdmPrU4g
HOPE THIS HELPS :)
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)
Basically, my problem is pretty straight forward. Currently, the way magento displays products in list view is far too large for my needs. It utilizes a much larger image than I'd like, and each product listed takes up a large amount of space. What I would like is to resize the listing so that each product is basically a single line or two that includes a very small thumbnail image on the left, the title, the short description and finally the price. If I can list my products this way, many more will be able to fit on a single page in a concise manner (which is what I need).
For reference, the way the site currently displays products in list view can be seen here with a couple test products: http://soundcherry.com/index.php/sound-effects.html
Is there any way for me to achieve the results I'm looking for? I'm not sure which files to modify or what exactly to change. I've been doing as much research as I can, but I'm somewhat of an amateur (especially with coding of any kind) and I haven't been able to figure it out.
Any help will be greatly appreciated. Thank you!
i was going to comment but it didn't fit
Edit both Template files and css files
for example on style.css
(which is here on your host http://soundcherry.com/skin/frontend/default/f002/css/styles.css)
on line 799 change padding:12px 10px; to padding:1px 2px;
then hard refresh (Ctrl+F5) and see the result
or on the same file on line 801 you can change margin:0 0 10px; to margin:0 0 2px;
and change width and height to width:80px; height:80px;
you can also add a line after line 801 to force resize those images like this:
.products-list .product-image img { width:80px; height:80px; }
but you should change < img > dimension in your Template files,
search for your template folder and when you find the file edit width= and height= in < img > tag
NOTE If you're using Firefox right-click on where you want to change and click Inspect Element, interact with the left box to select the element you want visually and then you will find out which line is that class or id on the right box of Inspector, id is unique and is shown by #id_name { } and class is shown like this .class_name { }
EDIT after comment
for that you should edit your template files, (they are html files with .Phtml file extension located im /template/ folders) find the file you need to change and change it
check this page out as it have many useful information
Click Here
EDIT 2
i have worked with other systems but not magento
i don't know which file exactly it is i think it might be products.phtml or something in your template folder
the code is something like this
<div class="f-fix">
<h2 class="product-name">{$title}</h2>
<div class="price-box"><span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span></div>
<p class="availability out-of-stock"><span>{$availability}</span></p>
<div class="desc std">{$desc}Learn More
</div><ul class="add-to-links"><li>Add to Wishlist</li>
<li><span class="separator">|</span> Add to Compare</li>
</ul>
</div>
as < div > and < p > tags (which may appear such as < div class="desc dtd" > ) are block elements, you should either apply style="display:inline-block" to them this can be applied like this
<p class="availability out-of-stock" style="display:inline-block">
or you can apply a new class by space to current tag like this
|HERE|
<p class="availability out-of-stock new_class">
and then define this class in your style.css like this
.new_class { display:inline-block; }
or remove the < div > < /div > and < p > < /p > tags to make them all apear in a single line, something like:
<div class="f-fix">
<h2 class="product-name">{$title}</h2>
<span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span>
<span style="availability out-of-stock">{$availability}</span>
{$desc}Learn More
<a class="add-to-links" href="{$wishlist}" class="link-wishlist">Add to Wishlist</a>
<span class="separator">|</span> Add to Compare
</div>
i think maybe it is a little soon for you to edit such scripts templates, please consider reading html and css tutorials and the page i gave you first
HTML Toturial
CSS Toturial
Plus this Magento design guide:
Magento Design Guide
i know it is not fun at the moment , but trust me its SO EASY (but you're trying to start with a complicated script and template, please google for simple examples to start learning CSS and HTML) and once you've learned CSS and HTML you will enjoy them so much
I am learning how to use HTML and css, and want to add a shopping cart at the right side just below the
menu1, menu2, menu3, menu 4 bar, but do not know how to do it, I was trying to do a .description definition in the css but had no luck I have a simulation of this, of course i cant upload images which are in images folder...
http://cssizer.com/build/preview/wzNqVAyI
and here is the source
http://cssizer.com/JKQLGFIM
So I am trying to make the description definition appear just below the menu bar and after that an image of a shopping cart , but do not know how to define it well, How should I modify the code to get something like this
instead of
If you want to add a cart icon on the right side of your website, Hear are the html codes.
<div id="head">
<div id="head-one">
<h1>TOM TOC</h1>
<h2>Slogan de </h2></div>
<div id="head-two"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/64x64/shopping_cart.png" /></div>
<div class="clear"></div>
</div>
Hear are the css codes.
#head-one{float:left; width:700px;}
#head-two{float:right; width:70px;}
.clear{clear:both;}
Guess it helps you.
hi now add overflow:hidden in your #nav id
as like this
#nav{
overflow:hidden;
}
*result is*