How to change/modify default CSS files?
Author: MD Kamrul Hassan
Visited 3556,
Followers 3,
Shared 0
Greetings sir,
every time.. i preview/export my proejct it has create new css files.. and i need to change (same chagnes) each time before i upload it to web.. and that is very time consuming..
is there any weay to define/alter the base css fiels, so x5 will use that modified css fiels instead of create new deafutle..
hope i m clear.. i m very sorry for my bad english as it is not my mother tounge..
best regards
Posted on the
Css werte werden überschrieben wenn die werte nach dem aufruf von x5 kommen.also einfach die datei oder den style tag in den head der seite schreiben.
Translate with google.
Cssvaluesare overwrittenwhen thevaluesofx5aftercallingsite.Therefore writethefileorsimplythestyletagin the headof thepage.
Author
thanks for yoru reply..
but in most case i don't use my own style, i just nee to remove/update some default style code :(
hope i m clear..
best regards
Hello Hassan,
Everytime you preview or export the default style code you modify will be overwritten with the default one and you need to add/remove the style code.
Can you please explain me what you want to remove or update in the style code?
Many thanks!
If you paste it in your css code properties of the page in the HEAD it is inserted after the call to X5. If you have properly addressed the class or ID of the CSS code will be overwritten by your code.If you want to leave something you have to write just do whatever you want then you can also help you better.
Author
thanks a lot for your reply sir, and also sorry for my late reply..
ok here is the things I need to update most of the time. so, think you may help me to reduce my manual work :)
1. Most important:
I need to open each page (whereever I have used html object) and find out each instance of "imHTMLObject " and remove/delete "height: ###px;" and change "text-align: center" to "text-align: left"
why:
I have to remove height value, because my custom code generate different size content each time. so, it's not possible to set a fixed height. and if the height is lower then the content then it's shows scrollbar what I don’t want.
I have to change text-align to left else all my custom code content aligned to center regardless my custom code align value
2. 2nd Most Important
I have to open each .css file in text editor and find replace "list-style: disc;" to null value
why:
Because I have custom bullet for list style.. that works in IE fine.. but If I don't remove that.. then in Firefox it does not work :(, but after removing it works fine :)
3. 3rd Most Important
I have to look for "imObjectImage_##" in each page and add "align=left" else each image set as center based on your software cell size
4. 4th and last Most Important
I have to edit "reset.css" and "style.css" each time and remove any table style code.. else my custom coding table don't work properly (link it's not aligned as it is in my custom code, not shows horizontal separator etc etc)
I hope I m clear (as my English is not good enough for you guys)
and would be great if you can help me to short out my manual work each time I export.. :)
thanks in advance for your kind help
best regards
Hello Hassan,
It's not necessary to edit the code everytime. you can use the attribute !important in the styling code you add in the css box in the HTML&Widget Object.
As Example isntead of deleting text-align: center and adding text-align: left you add "text-align: left !important"
HTML: <p>Text that has to be aligned left</p>
CSS: p {text-align: left !important}
When you add !important after a css code it will use this instead of another previously added.
for the height code ou need to find the name of the div and then in the css code box in the HTML&Widget Object add this css code:
#nameofthediv {height: auto !important;}
You need to replace nameofthediv with the ID in the html code for this div and with height: auto it will use the default value like if you would delete this code.
Generally if you want to ovveride a default style of WebSite X5 add the custom css code in the HEAD section by adding at the end of every css instruction the tag !important and it will be used your code and it will be not necessary to edit the css files.
Hope this helps.
Author
thanks a lot i hope those inforamaton was usefull ( but i need to try it first)
thaks a lot as you are so hepfull form the begning :)
but what about if i need to remove a code? like i told in number 2 and 4? in number 2 in need to remove "list-style: disc;" and in number 4 i need to remove any style code for table..
hope you can help on those issues too :)
best regards
Author
however i facing a crazy problem all sudden. from yesterday.. i can't preview.. using yoru software.. every time it previos it's hung up and i need to close it by force and re-start agian..
any idea?
Author
sir, i just test with hiehgt part but it not works.. :(
may be i did wrong :
the <dib> where class "imHTMLObject" exits has no id but the parent div has this id "imCellStyle_14" so, i try following css code on HTML expert tab:
"#imCellStyle_14 {height: auto !important;}" (without quation mark)
but that didn't work..so, i tried with following too :( but ddin't work either :(
"#imHTMLObject {height: auto !important;}"
hope i have provided enough informaton..
Author
even i tried to export the proejct to see if it work on live mode but i check page source and nothing changed :(
Author
thanks.. for what?
because it's works on number 2 issue :)
i have added !important on my custom css code in <head> tag thorugh pgae propertiese dialog box and it works :)
but then why not working on HTMlObject part? :(
Manipulate with javascript. I wrote a answer here.the html object have inline style.you must manipulate after site is loaded. Sorry for my bad school english.
http://answers.websitex5.com/post/50199
and screenshot (german)
Author
sir, that works (set the htmo object site 100%) but the issue is..
it make problem with layter for rest items..
please chck out the attachd image..
best regards
Please give me a link so that I understand it. The pictures I do not see the error in the code. It may be that there is added yet but what I can tell only when I see it online