[Resolved] How to change Banner at the top of pages and How to get custom Permalinks

[Asiya]

Im working on my site: https://byasiya.com/?page_id=2086
Im trying to change the banner at the top as I dont want this element.
I also want custom permalink to all my pages. Can you advice how to do this? Thank you for your help in advance. I also cant figure out how to change the purple color of the button in the menu at the top.

[Leo]

Hi there,

The top element is a header element which you can remove or add that page to the exclusion rule:
https://docs.generatepress.com/article/header-element-overview/

The button is controlled by this CSS in Additional CSS in the customizer:

.main-navigation:not(.slideout-navigation) .main-nav li.online-button a {
  background-color: rgba(178,139,178,1.0);
color: #ffffff;
  border: 0;
  line-height: 40px;
	padding: 0px 24px;
  border-radius: 50px;
  margin-left: 20px;
  transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.online-button a:hover {
  background-color: rgba(178,139,178,0.8);
color: #ffffff;
  transition: all 0.5s ease 0s;
}

Let me know if this helps 🙂

[Asiya]

Leo thanks for your help
I download the Simple CSS and added in different colors for the code and saved it but nothing happened. Am I doing something wrong?

Also for the subscribe button- IS there a way to customize this as well? https://byasiya.com/?page_id=3244
I would love for the text area not to have purple.

Are there any tools to basically be able to see what CSS is active so I can change the source document?

I also want custom permalink to all my pages- Is there a way to do this?

[David]

Hi there,

go to Customizer > Additional CSS in there you will see the CSS that Leo mentions here

Within that code there two lines that set the color ( static and hover):

background-color: rgba(178,139,178,1.0);
background-color: rgba(178,139,178,0.8);

Change the RGBA values to the color you want.

For the WP Forms button, try this CSS:

div.wpforms-container-full .wpforms-form button[type=submit] {
    color: #fff;
    background-color: #dddd00;
    border-radius: 25px;
    font-size: 15px;
    text-transform: uppercase;
}

Hover color:
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    background-color: #ffff00;
}

[Asiya]

Thanks! That helped greatly!!!

For my page the page is listed as page_id= etc– example below:

https://byasiya.com/?page_id=3244

How can I change this to a custom permalink?

Also I removed the banner and instead just added a line by choosing a color- It works great on desktop but on mobile the line it huge. Is there a better way to do this so I can have a line under my navigation to create a break between the navigation and the page below?

[David]

Permalink structure can be changed in Dashboard > Settings > Permalinks.

The Line – edit the Header Element, beside the padding options click the Mobile device icon and reduce your top and bottom padding.

[Asiya]

Thanks for your incredible support. I am so appreciative.

The other thing Im having trouble with is making new pages. How do I understand the block system and document system better. For example on this page: https://byasiya.com Im not able to access all the additional controls for styling as I am for the pages that have already been build. Like the highlight for PASSION – I am not able to style it because the settings features only give me limited options.

How to I create block pages that have all the options like the sample pages.
Thank you!!!

[David]

Glad to hear that.
Would you mind raising a new topic it will make it easier for you and others to find the answer in the future.

[Author]

Posts