Re: New site
Juan Garrido via opencms-dev <[email protected]> Fri, 4 Apr 2025 15:35:47 -0300
| Newsgroups | gmane.comp.cms.opencms.devel |
|---|---|
| Message-ID | <CA+TRiuh9reDjZOUtSwzWJtW+q397jG0_YbtsogOVsZx_J9vdkw@mail.gmail.com> |
Thanks, Michael. I'll try that. El vie, 4 abr 2025 a la(s) 4:38 a.m., Michael Emmerich via opencms-dev ( [email protected]) escribió: > Hello Juan, > > good to hear that the instruction worked :) > > Basically, there are two ways how you can modify the css for the Template. > > 1) You can build a complete new theme for the Mercury template. > > To do so, you have to check out the Mercury template from git under > https://github.com/alkacon/mercury-template and follow the instructions > there to build a new template css. It can take a bit to set up your > environment that you can create a new theme. > > Once you have created your own theme, upload the .css and .map file into > your OpenCms. If you only want to make changes to colors, the easiest would > be to upload them to "/system/modules/alkacon.mercury.theme/css/" as ll > other files like fonts, icons etc are identical. > > You then need to set the property "mercury.theme" to your CSS file, e.g. > "/system/modules/alkacon.mercury.theme/css/theme-mytheme.min.css". This > property should be set to your site folder, e.g. /"stes/mysite/". The > Mercury template will then use the modified theme. > > > 2) Another option would be to add a new, additional CSS that overrides > certain styles from the original Mercury css. If you only want to make > small changes, this might be a faster solution, but here you need to > inspect the current CSS and HTML to see what must be overwritten. > > To do so, make the following: > > - Go to the module management app in OpenCms and create a new modules, > e.g. "mymodule.com". Make sure that you have checked the "Create module > folder" and "Create resources subfolder" checkboxes > > - Upload the css to "/system/modules/mymodule.com/resources", the name of > the css MUST be "custom.css". > > - Switch the site selector to your site and edit the sitemap configuration > "/content/.config/". > > - Go to the "Attributes" tab and add a new attribute: with the key > "template.allow.mods" and the value "true" > > - Switch the site selector to the root site "/" and set a property to your > site folder, e.g. /sites/mysite/". You must set the property > "mercury.extra.css" to the folder where you have stored your custom css > file. > > So in this example it would be "/system/modules/mymodule.com/resources/ > " > > -> Your custom css will then loaded after the original Mercury css and you > can overwrite some styles. > > > So building a new theme is the "bigger" option which give you more > options, but you need to know how to work with SCSS files and it might be > more complicated to set up. For smaller changes, the custom.css might be > enough to do. > > > Kind regards, > > Michael > > The Alkacon Support Team > > > Am 03.04.25 um 20:15 schrieb Juan Garrido via opencms-dev: > > Thanks, Michael. > I did everything you told me without any problems. My question now is how > to change the background color of the header and footer. I want to use hex > colors if possible. For example, I want the header to have a black > background, and I want different, more personalized colors for the footer. > > El jue, 3 abr 2025 a la(s) 5:11 a.m., Michael Emmerich via opencms-dev ( > [email protected]) escribió: > >> Hello Juan, >> >> ok, here is a "short" introduction how to set up a new site in OpenCms >> using the Mercury template. The tricky thing is not setting up the site >> itself, but to configure the Mercury for its first use. >> >> >> What you need is a running OpenCms installation with the Mercury template >> installed. Some basic knowledge how to drag & drop content elements into a >> page in OpenCms is useful. >> >> >> *1) Create a New Website* >> >> - Go to the launchpad and select the Websites app >> >> - Click on the "New" icon in the toolbar >> >> - Enter the website name (Title), e.g. "MyWebsite" and the Server URL >> >> - Make sure that the "Template" field has >> "/system/modules/alkacon.mercury.template/templates/mercury.jsp" in it >> >> - Click on "Ok" and OpenCms creates the website and the required files. >> >> >> *2) Configure the Website for the use of the Mercury Template* >> >> - Switch to the Explorer view >> >> - Select your newly created website ("MyWebsite") in the site selector >> >> - Edit the file "/.content/.config" >> >> - Chosse >> "/system/modules/alkacon.mercury.template/configuration/mercury.master.xml" >> as the Master Configuration >> >> >> *3) Set up a Mercury Template model* >> >> - Switch to the Sitemap Editor >> >> -Select "Templates" from the sitemap mode selector in the toolbar >> >> -> You now see a "Default Model for site "MySite" under Templates and no >> entry at the Model groups >> >> - Create two model groups by pressing the "plus button": >> >> -Header: Title and Description set to "Header" >> >> -Footer: Title and Description set to "Footer" >> >> >> *4) Configure the Header:* >> >> - Click on the "Header" model group >> >> -> You now see an empty page with a read container in it >> >> - Click on "New" in the toolbar then choose "Template elements" under >> "Types" >> >> - Click on "Layout group" and drag & drop "Mercury header with flexible >> layout option" into the red container >> >> -> You now see a green, empty container and an orange message box >> >> - Click on "New" in the toolbar again and chose "Advanced elements" under >> "Types" >> >> - Click on "Dynamic function" and drag & drop "Header configuration" into >> the green container >> >> -> The page will automatically reload and then show up four new >> containers that we will later use to put content elements in our header >> >> - Press "CTRL-E" until you see the message "Switched view: Template >> elements" >> >> - Go to the edit point in the upper right, select settings and choose >> "Reuse elements" for the group type >> >> -> The box on top of the page now says "Reuse Group" >> >> >> *5) Add content elements to the Header* >> >> - Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Link Sequence" in the top right container, this is >> the only place where you can put it >> >> -> This will be the top header links, so you now should simply add some >> Dummy values in there. You can later change them to the real links >> >> - Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Content Section" in the top left container, this >> is the only place where you can put it >> >> -> This will be the Header image and website title, so enter a title and >> an image in this content. >> >> - Click on "New" and choose "Advanced elements" under "Types" >> >> - Drag and Drop a new "Navigation"in one of the other containers. >> >> -> This will add the navigation or the breadcrumb (depending in which of >> the containers you dropped it). Edit the content and give it a title >> >> - Click on "New" and choose "Advanced elements" under "Types" >> >> - Drag and Drop a new "Navigation"in the last remaining containers. >> >> -> This will add the navigation or the breadcrumb (depending in which of >> the containers you dropped it). Edit the content and give it a title >> >> -> We are now done with configuring the header and can return to the >> sitemap >> >> >> *6) Configure the footer* >> >> - In the Sitemap editor, click on "Footer" >> >> -> You now see an empty page with a read container in it >> >> - Click on "New" and select "Template elements" >> >> - Click on "Layout group" and drag & drop the "Mercury footer full" >> >> -> This will now show so two orange containers which we will later use to >> put content elements in our footer >> >> - Press "CTRL-E" until you see the message "Switched view: Template >> elements" >> >> - Go to the edit point in the upper right, select settings and choose >> "Reuse elements" for the group type >> >> -> The box on top of the page now says "Reuse Group" >> >> >> *7) Add content elements to the Footer* >> >> - As the footer is more flexible what ot put in there, we need to add >> some rows first >> >> - Click on "New" and select "Template elements" >> >> - Click on "Layout row" and drag & drop the "Row 1 column (12 -full) into >> the lower container >> >> - Click on "New" and select "Template elements" >> >> - Click on "Layout row" and drag & drop the "Row 3 columns (4-4-4) into >> the upper container >> >> -> You now created the containers for the footer. Usually the three upper >> ones can be used for content sections or link sequences (showing links >> below each other), the lower one is used for some footer links in a link >> section besides each other. For example, you could fill it like this: >> >> - Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Content Section" in the top left container >> >> - Add some text and headline there >> >> Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Content Section" in the top right container >> >> - Add some text and headline there >> >> - Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Link Sequence" in the top middle container, >> >> - Add some dummy links in there >> >> - Click on "New" and choose "Content elements" under "Types" >> >> - Drag and Drop a new "Link Sequence" in the top lower container, >> >> -> This will be the footer links, so you now should simply add some Dummy >> values in there. You can later change them to the real links >> >> - Go to the edit point, select settings and choose "Link sequence page >> element" as the formatter, "in a row" for "Display" >> >> -> We are now done with configuring the footer and can return to the >> sitemap >> >> >> *8) Configure the template model* >> >> - In the Sitemap editor, click on "Default Model for site "My Website" >> >> -> You now see an empty page with a read container in it >> >> - Click on "New" and select "Template elements" >> >> - Click on "Layout area" and drag & drop the "Area - One row" into the >> page >> >> -> You will now get one new container, this is where you later place your >> rows >> >> - Click on "New" and select "Advanced elements" >> >> - Choose "Model group" and drag & drop the "Header" model group above the >> Layout are from the step before >> >> - Click on "New" and select "Advanced elements" >> >> - Choose "Model group" and drag & drop the "Footer" model group below the >> Layout are from two steps before >> >> -> You now created you Template model which will be used when creating >> new pages >> >> >> *9) Creating new pages:* >> >> -Select "Sitemap" from the sitemap mode selector in the toolbar >> >> - Click on "New" in the toolbar then crag & drop a "Default Model for >> site "MySite" into the sitemap >> >> -> The new page is now called "page", you can rename it by clicking on >> the name. >> >> - Click on the newly created page, it then opens in the page editor, >> including the header and footer you have created. >> >> - Click on "New" and select "Template elements" >> >> - Click on "Layout row" and drag & drop any of the layout rows into the >> orange container. You can add multiple layout rows to build the structure >> of the page you want >> >> HINT: If you always want to use the same row structure, you could also >> add the rows to your Template Model. All pages created with this model will >> have the same row structure, but you still are able to modify it after >> creating a new page >> >> - Click on "New" and select "Content Elements. Select the type of content >> you want to have and drag& drop it in any of the containers in your rows. >> >> >> Please refer to https://mercury-template.opencms.org/ for all the >> content types and how to use or configure them. Please note: The Mercury >> documentation is only available in German, so you need to use the translate >> functions of your browser to get it in English. >> >> >> I hope that I mixed nothing up here, but it should work this way. >> >> >> Kind regards, >> >> Michael >> >> >> Am 02.04.25 um 14:09 schrieb Juan Garrido via opencms-dev: >> >> Hi Miguel >> Thanks for your reply. I want to create a website using the Mercury >> template. >> >> El mié, 2 abr 2025 a la(s) 7:52 a.m., Michael Emmerich via opencms-dev ( >> [email protected]) escribió: >> >>> Hello Diego, >>> >>> > Hi, I'm new to OpenCMS and I'd like to know if you have a guide on how >>> > to create a new site. I've read the documentation and I don't fully >>> > understand it. Is there a step-by-step guide? >>> > Thanks >>> >>> Do you want to create a new site using the Mercury template, or do you >>> want to create a new site that uses a new, custom build template? >>> >>> If you want to use the Mercury template for your site, the "challenge" >>> is to configure it correctly for your use. if you want to use your own >>> one, the thing is to make your template first. >>> >>> If you can say which way you want to do, I could give some advice. >>> >>> >>> Kind regards, >>> >>> Michael >>> >>> -- >>> Michael Emmerich >>> >>> Alkacon Software GmbH & Co. KG - The OpenCms Experts >>> http://www.alkacon.com - http://www.opencms.org >>> >>> _______________________________________________ >>> This mail is sent to you from the opencms-dev mailing list >>> To change your list options, or to unsubscribe from the list, please >>> visit >>> https://lists.opencms.org/mailman/listinfo/opencms-dev >>> >>> >>> >>> >> _______________________________________________ >> This mail is sent to you from the opencms-dev mailing list >> To change your list options, or to unsubscribe from the list, please visithttps://lists.opencms.org/mailman/listinfo/opencms-dev >> >> >> -- >> Michael Emmerich >> >> >> Alkacon Software GmbH & Co. KG - The OpenCms Expertshttp://www.alkacon.com - http://www.opencms.org >> >> _______________________________________________ >> This mail is sent to you from the opencms-dev mailing list >> To change your list options, or to unsubscribe from the list, please visit >> https://lists.opencms.org/mailman/listinfo/opencms-dev >> >> >> >> > _______________________________________________ > This mail is sent to you from the opencms-dev mailing list > To change your list options, or to unsubscribe from the list, please visithttps://lists.opencms.org/mailman/listinfo/opencms-dev > > > -- > Michael Emmerich > > ------------------- > > Alkacon Software GmbH & Co. KG - The OpenCms Experts > Michael Emmerich > An der Wachsfabrik 13 > 50996 Koeln, DE > > Tel: +49 (0)2236 3826-14 > Fax: +49 (0)2236 3826-20 > Email: [email protected] > http://www.alkacon.comhttp://www.opencms.org > > Amtsgericht Köln, HRA 32185, USt-IdNr.: DE259882372 > Vertreten durch: Alkacon Verwaltungs GmbH > Geschäftsführer: Alexander Kandzior, Amtsgericht Köln, HRB 88218 > > _______________________________________________ > This mail is sent to you from the opencms-dev mailing list > To change your list options, or to unsubscribe from the list, please visit > https://lists.opencms.org/mailman/listinfo/opencms-dev > > > > _______________________________________________ This mail is sent to you from the opencms-dev mailing list To change your list options, or to unsubscribe from the list, please visit https://lists.opencms.org/mailman/listinfo/opencms-dev