How Do I Make A Custom Page as Homepage?

One of the users on the site asked if I could make the site more look more attractive in appearance. Are there suggestions on how I can achieve this? I found this link https://vanillaskins.com/ already, but I'll like to try out more options.

Many thanks, again.

Kaspar · October 2021

that really depends

Yes, can be done.

Depends what thye mean, what you want.

I will give a couple examples on how to style some elements and in the end how to add it.

div#PageBody {
    background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url(https://images.freeimages.com/images/large-previews/919/ottoman-coin-1558628.jpg);
    background-position-x: center;
}

div#PageBody {
    background: gainsboro;
    padding: 50px;
}

#PageBody ul {
    background: rgba(204, 229, 255, .3);
    margin: 5px
}

u {
    color: brown;
}

<div class="example-paragraph">
text 1 <br>
text 2 <br>
text3 <br>
</div>

that ^^ in your page

 .example-paragraph {
    border: 2px solid red;
}

that ^^ in your style in CSSedit (see plugin link below)

lets you make bordered paragraphs like

This is but examples in its entirety, colors and image

Note: some style selector may affect elsewhere on the site, so test / check it out instead of just setting and forgetting.

Working with colors

https://www.hexcolortool.com/

Setting CSS without building a new theme

https://open.vanillaforums.com/addon/cssedit-plugin

rizamuharram · October 2021

https://open.vanillaforums.com/discussion/comment/263796#Comment_263796

Take a look at my forum: https://belajarastro.id

I created my own custom homepage with the Custom Pages plugin (download here).

To make the page a full page, you can add this code:

.MainContent {
  width: 100%;
  margin: auto;
}
.Panel-main {
  display: none;
}
.Breadcrumbs {
    display: none;
}

Hope it helps your forum to have a more attractive appearance!

tedulif · October 2021

Thanks, @Kaspar for the feedback. It seems there are lots of possibilities with modifying Vanilla forum appearance. I will look into them.

@rizamuharram, your forum https://belajarastro.id looks really nice. I almost didn't believe it's built with Vanilla.

I have installed the CustomPages plugin. I will appreciate every help in setting it up to give my pages a great appearance.

Seems I need to write each new custom page in php and copy or replace into my file directory:

educativeguides.com/plugins/CustomPages/pages/default.php

If that's the case, could you please suggest where to find nice looking php templates that are free to use? Possibly, I need a setup similar to your forum https://belajarastro.id and I actually understand how to use HTML and CSS, but not familiar with PHP.

Many thanks in anticipation.

Kaspar · October 2021

Be sure to take a look at Basicpages aswell.

https://open.vanillaforums.com/addon/basicpages-plugin

tedulif · October 2021

Thanks, @Kaspar. I have basic pages installed.

It's what I used for setting up my Synopsis and About pages:

https://educativeguides.com/about

I just noticed the text "No formatter is installed for the format rawhtml." I chose RawHTML during the page setup. Does anyone know why this is showing when I share my website link?

tedulif · November 2021

Hi, @Kaspar @rizamuharram and others, I'm sorry to bother you again.

I'm exploring the CustomPages plugin. I created a simple page available at: https://educativeguides.com/plugin/page/about2

I need to create an interactive page that references external CSS, Images and JS files. So I created an index.html file, added all the files (CSS, JS and Images) in their respective folders and it loads fine locally using VS code and Browser.

I added: "<?php if (!defined('APPLICATION')) exit(); ?>" to the first line of the index.html file and renamed it to index.php before uploading to /educativeguides.com/plugins/CustomPages/pages directory in my cPanel. I also added other required folders and files (assets, vendor, and prepros.config). See attached image.

When I try to access the page at https://educativeguides.com/plugin/page/index none of the styles and js files is rendered. It only shows plain text.

Meanwhile, the index.php file loads fine locally, as shown in the screenshot below:

Is there a way to get the same result loading index.php file locally as when I load it via the URL: https://educativeguides.com/plugin/page/index

I intend to redirect the link to my site homepage route after all.

Big thanks in anticipation.

Kaspar · November 2021

This might help

https://open.vanillaforums.com/addon/howtovanillapage-plugin

tedulif · November 2021

Thanks for your response. I have installed and activated the howToVanillaPage plugin.

Where do I add new pages? It also seems not to be added anywhere to my admin dashboard page.

I don't seem to get the default URL compared to the CustomPages plugin:

https://educativeguides.com/plugin/page/about2

Kaspar · November 2021

Not sure it would show up there.

From the description

"HowToThis&That Plugin is one of a few plugins I wrote in order to show how This&That can be achieved with the Garden framework. The plugin is exhaustively commented and I hope I have done this good enough that you are able to understand what is going on. Some examples are quite simple, others are mor complex."

tedulif · November 2021

Oh, I think I get the idea. It's basically meant to guide those looking into developing stuff (plugins and addons) using the Garden framework. I'm not sure I'm correct, though. Thanks for your help, anyways. I wish @rizamuharram or someone else could shed more light on how to build something similar to this: https://belajarastro.id

Kaspar · November 2021

Yes.

I see I didnt include this in the quote:

"Example for creating a custom page that looks like most other pages in Vanilla."

How Do I Make A Custom Page as Homepage?

Comments