Would like a simple way of changing the background colour of a block and some styling

Permalink Browser Info Environment
Forgive a bit of a newbie question but I'd like to be able to style several blocks on the right hand side of this pagehttp://bmc-client.co.uk/preshute/index.php?cID=210... eg 'Statistics', 'Ofsted Report' and 'SAIS Report' but I'd like to do it using CSS as I want to change both the heading and the background colour then padding, margins etc. They will each have different colour backgrounds but the title styling will remain the same. Could you advise the best way of doing this. In 5.6 it was design and giving it a custom css class but not sure if this is the best way in 5.7 and can't see where I can add that.

Type: Pre-Sale
Status: Resolved
chassa2556
View Replies:
datasouth replied on at Permalink Reply 1 Attachment
datasouth
Hi Charlie,

Currently, there are a few ways to add custom css to concrete5.7.

1. Add css through customization. Go to settings -> design - > customization and at the very bottom you'd see a custom css icon. Click it and add your css. Save and publish.

2. Create a custom css file and call it on the header. Even if 5.7 uses less files it would still recognize css files.

3. Append css to less files. Go to packages/ds_academy57/themes/academy/css and find the main.less file. Open it with text editor and add your css. Less files are structured css but you can still add normal css to it. see attached.

Let me know if you need further assistance.

Regards.
chassa2556 replied on at Permalink Reply
chassa2556
Hi

Thanks for this great support and advice. I've managed to get the customization one to work but I'd like to have control of the CSS on my desktop and ftp.

So I tried route 3 but I can't seem to get the CSS to work I've added this to the bottom of the main.less file.

/*---Custom CSS--*/
.statisticSide {
   background-color: #EE686A !important;
   }
I'm expecting the stack "Statistics" here to change backgroundhttp://bmc-client.co.uk/preshute/index.php/About-Us/right-sidebar-2... but it doesn't seem to be pulling in the css call. Any ideas what I could try.
datasouth replied on at Permalink Reply
datasouth
Hi,

I checked your page and saw that the side items had styles. Do you still need to add css to the main.less. Im guessing it was a cache issue that's why the css didnt reflect on your page. Try clearing cache and turning cache settings off especially the one that parses the less files in the cache.

Regards.
chassa2556 replied on at Permalink Reply
chassa2556
Sorry I found a way of putting an override file on the header which is pulling in the information from the custom css successfully I've added to the elements/head_element file this code

<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/preshute-overides.css">


Many thanks again
datasouth replied on at Permalink Reply
datasouth
No worries. Let me know if you need help with anything else.

Btw, the side bar designs look really nice.

I'll mark this ticket resolved.

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.6
Version Installed - 5.7.5.6
Database Version - 20151221000000

# concrete5 Packages
Academy (1.2.5), Growthcurve Vimeo Video (0.9.1).

# concrete5 Overrides
languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.4.12 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4

# Server API
litespeed

# PHP Version
5.3.29

# PHP Extensions
bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, ionCube Loader, json, libxml, litespeed, mbstring, mcrypt, memcached, mhash, mysql, mysqli, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Reflection, session, shmop, SimpleXML, snmp, soap, SPL, SQLite, sqlite3, ssh2, standard, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, yaf, Zend Guard Loader, zip, zlib.

# PHP Settings
max_execution_time - 1000
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 512M
post_max_size - 8M
safe_mode - Off
safe_mode_exec_dir - <i>no value</i>
safe_mode_gid - Off
safe_mode_include_dir - <i>no value</i>
sql.safe_mode - Off
upload_max_filesize - 1G
memcached.sess_lock_max_wait - 0
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
safe_mode_allowed_env_vars - PHP_
safe_mode_protected_env_vars - LD_LIBRARY_PATH
yaf.forward_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:45.0) Gecko/20100101 Firefox/45.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.