i have got the following problem:
I want to create a new Liferay Theme and in this Theme there are Portlets in the Header, how can i Design these Portlets properly? My try was to deploy a "_unstyled" Theme and then copy the theme "classic" in "_diffs". This works fine and I have managed to get the most css done. But now i have a Login-Portlet in the Header and if the User is logged out , the Portlet has more "heigth" and so i cant use the same margin for these two cases.
My idea now was to add a .css file to my Css files and include this one as the last, which overrides the rest, if the user is logged in. This should be done in the portal_vm i guess, but since i am not familiar with the Liferay commands it would be nice if you could help me.
If this is just a little bit of Code, please give me a short example.
Im working with Liferay 6.1 and Eclipse.
thanks in advance
There is a "signed-in" and a "signed-out" class on body depending if someone is signed in or not.
So you might be able to just use this in custom.css
.signed-in .portlet-login {
margin: 0px;
}
.signed-out .portlet-login {
margin: 10px;
}
of course, change the margins and other values according to your environment.
Related
I'm editing my CSS and I have new Custom class but it's not working and it is not showing in inspection either.
Normally when you have a class and this class is overriden, it shows in inspection so I don't believe this is a hierarchy problem
Style.css
.search-form .search-submit .mycustomclass{}
in my inspection i see
.search-form .search-submit{}
is loaded but that's it
maybe you are viewing cached version of your css, try removing your browser cached or try hard refresh by pressing CTRL + F5
hope it works for you.
Please check those steps to see if any of them may help you:
check if you are on the correct URL.
Clear your cache (especially if you use a CMS like Drupal).
On the Dev Tools (Google Chrome) go to Sources, find your CSS file
and check if your class is listed on that file.
Try to make any other changes to the CSS file to see if it will
take any changes at all. E.g. body { display: none; }
I'm working to front end with AngularJS, so i decided to use Bootstrap. In my page sometimes i use class="btn" (because i need some buttons) but i have seen one difference in runtime.
I explain the problem here.
When i test my application in XAMPP (while developing) everything is good, without problem, but when i copy my files to my web dynamic project (i use spring) in runtime i see reduced height of buttons. Anyone has the same problem? i hope this was not duplicate of question, but i didn't what to search.
Here you can see what i means -->
http://imgur.com/a/ikO0n
Solved with height: 24px; in .btn-xs css class
I have a wufoo form that I am trying to customize with css. My css form is being uploaded as far as I can tell, but so far I haven't been able to change anything. Any tips?
The only thing I've tried to do is change the header color like so:
.wufoo .info h2 {
color:blue;
}
Here are the necessary links:
Stylesheet - http://crimsonroot.com/files/php/custom.css
Form - https://thedrawshop.wufoo.com/forms/r60xxmf0kwbb7j/
The issue as far as I can tell is that you are trying to link to a stylesheet, that is not on an secure connection. Basically it's http but your form is secured https. Many browsers by default prevent the loading of "mixed content" you will need them to both be on the same connection style before it will even begin to load.
Hope that helps.
Also try this, tested and works.
http://thedrawshop.wufoo.com/forms/r60xxmf0kwbb7j/
I ran into the same problem and then I hosted it on Github but it seems that Wufoo is still not loaded it even if it was imported correctly when you check the source.
What I did was to host it instead on Dropbox. I used the sharing link and then added raw=1 at the end.
E.g. https://www.dropbox.com/s/x2fhvsk83fnebw3/wufoo.css?raw=1
That did the trick for me. I hope it helps.
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.
I have just recently implemented the five star rating system from ajax, into my asp.net site. Everything works fine in locall debug mode.However. Once i publish it, the css does not show up. I have declared all of the css within the content page, not sure if this is why. I am very in-experienced with working with css; so i am sorry if it something simple.
I have checked the spelling of the image url, and have also tried implementing it into the site.css. But as i said, i am in-experienced; so am not sure what to do here.
This is my code as it stands:
The css declared at the top of the content page:
http://codepad.org/m1w39Hep
The reference to the css from my rating control:
http://codepad.org/Kl0BKets
Thanks in advance!
Check if your css links is right and your css files loaded successfully
I have seen your code.
Give extention as ".css" and not ".c"
I dont think that you can use Codepad for that because it does not give support for CSS.
If you are not using Codepad
Then as you are deploying it in server then check the URLs of the Images that are present in the CSS file for rating/.