Fix For Concrete5 Tables Borders Not Showing In Greek Yogurt

Please note that I do not get paid to do these articles. If an article is useful to you, please let me know. Reminder to make backups before changing anything.

The Problem

You may have discovered when you are making use of the Greek Yogurt theme (the default theme, and preferred theme by most) that no matter how you add a table into the Concrete5 editor (may it be via Content Block, HTML Block, or copy and paste from a Microsoft Excel sheet), you cannot get the borders to show. Even if you set the table properties properly, and even if you apply styling to the who table and all the cells. It won't matter what border thickness or color you apply or if you manually enter the code into the source. It will show correctly while you are in the editor, but as soon as you save the block, the table borders no longer display, and the properties are still there if you go back and edit again. When you go back into the editor, it will show, but not on the site page after saving.

Why?

Because the Greek Yogurt theme css is causing it. It has a reset css file, which I guess it uses as a sort of Override.

Fix

Access your hosting file system. This would not involve the Concrete5 control panel/Dashboard. Hopefully you have a great hosting like Web Hosting With 1 Dollar (WHW1), and have all the needed tools easily from the hosting control panel. I will be using File Manager from within WHW1's cpanel. You will want to locate the folder and sub-folders of /greek_yogurt/css/reset.css. I just use WHW1's File Manager search to simply locate greek_yogurt and go into the needed sub-folder. In my case, the folder name and path would be /public_html/concrete/themes/greek_yogurt. If you need help using the File Manager, there is a tutorial for it at http://www.whw1.com/a1/tutorials/cpanel-tutorials/. You can also use any FTP software, or direct folder access method (like WHW1's Web Disk), or whatever means you prefer to access the folders and files. There is a list of free FTP softwares and tutorials for each at http://www.whw1.com/a1/tutorials/file-transfer-tutorials/. If you are doing a theme override, as described in the article of HowTo Create Concrete5 Override And Protect Against Theme Updates, then your path may be something like /public_html/themes/greek_yogurt instead.
Locate the file reset.css.
Make a copy of the file as a form of backup to allow you to easily undo things without involving a restore.
Next, open the file reset.css in a text editor. Use either the Text Editor or Code Editor from the File manager (click on the file via right mouse button to chose text or code editor) or download the file to your computer and use a simple text editor like Notepad. Do not use something like Word to avoid adding invisible characters to the content of the file. If your editor asks for editing format, then know that editing as utf-8 is fine.
Replace the whole thing, which should originally be this:

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}

Replace the above with the below replacement that includes commented out portions:

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,/*table,tbody,td,tfoot,th,thead,*/time,/*tr*/,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,/*strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,*/caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}

Disabled (commented out) portions are enclosed between /* and */.
Test. Go back to your Concrete5 website and refresh any page that you added a table with borders or add a table to a page and give it borders, and now it will show. The border shows, the colors show, and the spacings are done as you specify in the editor.

Finished.

What C5 Versions Was This Tried On?

Tried on a few, but in general 5.6.x.x.

Feel Free To Leave A Good Comment. :)

Look around, and you may find other useful articles. Add this site to your Bookmarks/Favorites for easy return for new articles. Consider submitting technical articles for publication, including your embedded links. I will even create a new category if needed.

Page 23 of 124

All Categories List