CSS Code Editting and Changes
Author: Ian S.
Visited 4328,
Followers 2,
Shared 0
I need to alter the CSS code on a number of pages. I need to change for one cell the Overflow and z-index. When I export the website I can go in to the CSS code and make the changes manually but I lose them if I make any other changes to the site and export again. How can I stop these changes reverting back or how can I put my CSS code in the Expert tab on the HTML Cell.
Posted on the
Hi
Each time you export, you have to upload the css file with the changes you manually made
for example download the css file from inside the pcss folder to your computer do the changes on the file on the computer and upload again to the pcss folder and each time you export from x5, upload the css file again to the pcss folder
That make sense, I have done it on a few of my websites loads of times
Kind regards
Ian
Author
Hi Ian H.
Thanks for this but the problem with that solution is that if you change aby aspect of the web page, including headers and footers the CSS reflects this. Hence the need for manual editing. I agree if I were to only alter text or details of an existing cell then this would work but it is not quite what I had in mind. There is an 'Expert' tab on the HTML cell editing screen. I have tried using this but it only inserts code not replaces it. Still looking for ideas.
Hello Ian,
When you export the project WebSite X5 recreates all the files and so your changes will be overwritten. You can replace functions in the expert tab adding the tag !important to the css instructions that has to be executed instead of others.
Hope this helps!
Author
Hi Claudio
Thank you for your response to my question, however using the !important tag does not appear to do what I need. I understand that the CSS file for each page is created when website X5 Evolution v9 is ‘compiled’ or exported to disk. I also understand that if a change is made to a page, the header or footer of the site then the CSS changes. There lies my problem as there is one cell on each page where I need the CSS to be different to that that is created by Website X5. Below is an example of the code that Website X5 creates:
/* ----------------------------- CSS code example ------------------------- */
#imCell_1 { display: block; ... .. ...........
#imCell_2 { display: block; position: relative; overflow: hidden; width: 222px; min-height: 41px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid transparent;}
#imCellStyle_2 { position: relative; width: 216px; min-height: 35px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;}
#imCellStyleGraphics_2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;}
#imCell_3 { display: block; ..... . ...... ......
/* --------------------------- end of css code example -------------------- */
To make this cell do what I need, it displays a Facebook Like button, I need to change 2 things in the CSS code, the overflow has to be changed to visible and the z-index to 3. These changes are necessary to display the comment box produced by the FB widget when either Like or Send is clicked on.
I also need to make a change in the HTML exported code for the lines shown below:
<!-- ----------------------------- HTML code example ------------------------- -->
<div id="imCell_2" class="imGrid[0, 0]"><div id="imCellStyleGraphics_2"></div><div id="imCellStyle_2"><div class="imHTMLObject" style="height: 35px; <b>overflow: auto;</b> text-align: center;"><!-- Social Network.Facebook Like Button: START -->
<!-- ------------------------------------- end of html code example ------------- -->
Again here the overflow needs to be changed to visible.
Any suggestions you may have to achieve these changes automatically would be appreciated. So far I have found that adding any code in the Expert tab of the HTML Cell edit facility simply adds that code to the CSS file which is not what is required.
Thank you for your help.
Regards
Ian
Hi Ian S.
I hope to understand your question correctly.
Try to read (italian language) here:
http://answers.websitex5.com/post/41328#6 (primo test)
http://answers.websitex5.com/post/41328#9 (secondo test)
I'm sorry for my bad English
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Author
Hi Lemonsong,
Thank you very much for your response to my question. It has solved the problem, thank you. It would seem that I do not need the HTML code changed and when I put in your code it lost my menus. Like one of your other followers, I too would think that Website X5 evolution 9 would have implemented this improvement for their widgets.
Have a look at www.barelancla.com/it/index/html
Anyway, thank you again for your help and I apologise for the translation below – it was done with Google.
Best wishes
Ian. S
Ciao Lemonsong,
La ringrazio molto per aver risposto alla mia domanda. È stato risolto il problema, grazie. Sembrerebbe che non ho bisogno il codice HTML cambiato e quando ho messo nel codice ha perso i miei menu. Come uno dei tuoi seguaci di altri, anch'io penso che WebSite X5 Evolution 9 avrebbe attuato tale miglioramento per i propri widget.
Dai un'occhiata alla www.barelancla.com / it / index / html
Ad ogni modo, grazie ancora per il vostro aiuto e mi scuso per la traduzione qui sotto - è stato fatto con Google.
I migliori auguri
Ian. S