Want to Change the Magento go header section - css

Currently I'm working on magento go. Its not just like Other magento CMS. Its a online CMS where I can manage my store. I need to change the home page design. I have tried to edit CSS files but it doesn't give me the desired output. I want to change the whole page design and want to add my one. Basically I don't get the way to edit the header part. The built in header editing section is known to me but I want to change the whole header part. Am I permit to do this in magento go? I have the html and css file but can not integrated the file in magento go. Is there any solution? Is there any place in magento go to edit phtml file? I need it very badly.Please HELP.
Thanks
Waiting for your reply.

There is a great video series called Magento Community Tutorials on how to customize every aspect of Magento. Link below:
http://www.youtube.com/playlist?list=PL3B0BAAF482B16EAB
However, as I only have the community edition, I am not sure if you can access Magento's server for Magento Go to customize to the level that you can with the Community edition.
Are you able to access all of the files and folders of Magento Go? For example, can you access the server's root folder and see something like this:
If you can, then the video tutorial series will answer all of your questions.

I am not sure if that works. The videos you gave are for magento community version, where you can actually access the FTP of your webhost. Magento go is "server-based" you cannot access the ftp files. I've been having the same problem as pavan.
But I had some level of success in changing some properties in the header portion... well, Header-container actually.
In your CSS Editor, type these code:
.header-container {
background: #FF6666}
This changes the color of your header to a rosy red color. Change the background value to your desired color.
with the other elements, I'm still looking for their classnames, here are some changes I made in my header
.top-cart .block-title strong {
display:block;
padding-right:10px;
background: url(../images/bkg_header-panel.gif) 100% -71px no-repeat ;
font-size:10px;
color:#565051;
font-weight:bold;
text-decoration:none; }
this changed the color of my cart(#) text.
I know this is not much but I hope it helps

Okay, Here is a new way I just found. This method allows you to put a picture in your header portion. btw, If you are using a background color (like I showed below/above), i'd advice you use a transparent bg on your pictures.
upload your picture. Go to Design > Themes Editor > CSS Editor. Click on the Manage button next to Image Assets. Click Browse then look select the picture you want on your header. Then click Upload.
Insert your CSS rules for your Header. The header portion is usually named header-container. So we need to make a css code for this. Type:
.header-container {background: url() ;}
You can add some more options in your background property in CSS. For more information in CSS, try CSS Background Property from w3schools.com
Place your image in your CSS rules. This time, we need to place the "image code" in your CSS rule. Place your cursor between the brackets "()" then Click Manage button in your Image Assets, select the image you uploaded (or the image you want to put in your header) then click Insert File
Again. I hope this helps.

Related

How to add a wallpaper/image in the background page in google appmaker?

I need to add a particular wallpaper in the background page of my app to make the app look more colorful and beautiful. Is there any way?
The problem is that once you add an image to a page then it does not allow you to place another widget over it or cover it. It always aligns it horizontally or vertically.
This is pretty much basic css. I'd recommend you to look over this to learn more. So, in appmaker, if you want to apply the background image to a page do this:
The CSS
1.) First, select the root widget of the page you are interested.
2.) Now, that you have the page selected, let's move to the style editor. Once there, on the Page Style section just type a "."(period, dot) and wait for the suggestions to appear. The first suggestion is what you need, so just press enter or select it with your cursor.
3.) Now that you have selected the element with a css selector, you can apply styling. For the background, you need to do this:
.app-myTestingPage-myPage {
background: url("url-to-picture");
}
In the above example, url-to-picture represents that, a url to a an image, preferably if it is served over https.
The URL
I know two ways in which you can get the background image url. The first one is to use any image url you find on the internet or a url hosted in your own server or cdn. The second way is to upload the image to appmaker resources and use that url. If you choose the latter, then do the following:
1.) Go to the app settings.
2.) Click on Resources
3.) Drop your image file in the respected area or click the button to browse
Once the resource finishes uploading, you can click the copy icon to copy the url to the resource and you can use that in your page css as the background url.
You should be able to accomplish this using CSS in your style editor. Either in your 'Page style' or 'Global style' depending on if you only want the background image to a specific page or be available throughout your application. You will want to declare a custom class or reference the specific elements that you want to render the background image in.
For a specific element:
.app-YourPage1-YourPanel, .app-YourPage2-YourPanel {
background-image: url(YourImageURL);
}
For a global style, create a class and for each element you want the background image applied you would add that class to the 'Styles' section of that element(widget):
.YourPanelClass {
background-image: url(YourImageURL);
}
Either way I highly suggest you do a search on 'html background image' so you can read up on additional options such as repeating the image to fill space and such.

How to change height of default wordpress embed link "windows"

could anyone tell me if it's possible to make all these(in picture) wp-default links with class .wp-embed .post same height so that it won't look horrible like in picture.enter image description here I know that it is programmed so that the height addapts to text size inside it.
How do i do that, i can't find they way how to overwrite that with CSS. Is it only achievable by PHP / if so how - i can barely read PHP for now...
There are two separate questions here:
How do I change the css on a wordpress site?
The answer is that it will depend on the setup of your site.
-- You may have access to edit the css for the theme by going to Dashboard -> Appearance -> Editor and then finding the style.css
-- You may also have access to edit the css file through manually editting the file on the server.
-- if those first two options don't work, and you are able to add plugins, you can add a plugin to let you add css to the page. Simple Custom Css is one such plugin.
How do I fix this particular css problem?
To answer this question I would need to see more of the css and html for this page

Using a Custom font on weebly blog

I'm trying to use a custom font on my blog which is I haven't make it work yet. Maybe you guys can help me out on this.
I just want my blog title to have its own font. here's the HTML structure
http://prntscr.com/curez2
First thing I did was I uploaded my ttf font in my asset folder
http://prntscr.com/cura4a
Next, import the font in CSS "main_style.css"
http://prntscr.com/curfro
here's the class on my blog-title
http://prntscr.com/curgr8
did I miss something? can someone help me out please. thanks!!
You need to include the full path to the .ttf file on http://prnt.sc/curfro
It looks like you have everything right, however not seeing a live example makes it a little hard to isolate. But there are a few things to consider. For example:
Did you try publishing the site?
Are you ONLY trying the Blog Title?
IF you have set your Font Settings for the Title and Blog Post
Title, to a specific font, it's going to override the Theme's design
and your custom Font. In that case edit the Font Settings and choose
"Default". Then try to see if it works(dont forget to publish). See: https://hc.weebly.com/hc/en-us/articles/201505666-Edit-Fonts
Is the 'Content Area' a div with an ID of content <div id="content"></div> (IF not that could be the issue.) Note: #content h2.blog-title could also be written as .blog-post .blog-header h2.blog-title
Have you tried a different font file(try a different font type/file)
With that, you should at least be able to isolate the issue, if not resolve it.

Joomla css hide date create

I want to hide the date on this page.
I tried to change it inside joomla but I couldn't. It's not an article but a JKit page and there is no such an option.
I used the "inspect element" feature to find the corresponding css file and line (bootstrap.css #554). When I change the element through the "inspect element" menu its working but when I open the css file and change it, it doesn't work.
Any suggestions how I can hide it?
p.meta {display: none;}
That ought to do it. Granted, any other metadata will also be hidden. You should add this to a custom CSS file and not modify core Joomla or extension files.
I find it hard to believe that jKit doesn't have a setting for that. (Update: I see that jKit is very new and lacks good documentation.) Also, a template override might be more to your liking.
Most Joomla components allow you to control things like this in the options for the items and also in the menu options when creating a menu link (or setting the global options to change the default behavior. If this component does not, make either an alternate layout or a template override (depending on whether you want to always change this or just on this one page). If you go into the template manager, template view there is a system in place that will automatically create a copy of the layout and put it in the right location. Just edit that to show what you want.
Ok so I solved by editing the according .php file of the component.
I just removed the echo line of the date.
Nothing else worked.

Css background Wont work?

I have a question.
I am currently building a "blog" website. Not that it matters but..
I am trying to set my background to be a specific image that i have.
And it used to work! Until recently and I just don't know why it wont.
It works when i am on my computer, everything works fine.
But i am using 000Webhost as the hoster for the website.
So if u go to "http://pontuslundhblogg.uphero.com/"
You might see that the website is completely white. Cause the picture wont load for the background.
In my css sheet, i am using:
body {
background-image: url("bakgrund.jpg");
And yes, i did name the picture bakgrund.jpg and uploaded it to 000webhost. Its the exact same name etc. I wondering.. Could two different css stylesheets make so it gets weird or something? Cause I added a second css style sheet to be able to have a drop-down menu in a different sheet, and i added the drop-menu. Around that time it started messing with me..
Is it me doing something wrong.
Or is it 000Webhost?
(Might add that none of my pictures is working now, i can also contribute with more code if needed!)
If you go to pontuslundhblogg.uphero.com/bakgrund.jpg you get a message
"The image pontuslundhblogg.uphero.com/bakgrund.jpg cannot be
displayed because it contains errors".
If you go to pontuslundhblogg.uphero.com/bakgrund1.jpg you get 404 page, which means that the first path (bakgrund.jpg) is correct - but the image itself isn't good.
Try to upload it again or contact the hosting service.
If you use FTP maybe you need to change something in your FTP program settings - maybe change from ASCII to Binary transfer.
http://www.inmotionhosting.com/support/website/file-management/corrupt-file-ftp-transfer

Resources