Adjustments to simple site

hartinart · Member · Jan 3, 2017 at 4:33 pm
Copy link

Add topic to favorites
I am currently using the Affinity theme for my site.
My URL is http://hartinart.org

I am wanting to make a few changes to the theme.

HOMEPAGE CHANGES:
-The homepage currently has a grey slide up bar. I wish to remove this if possible. I would settle for changing it to white. But I would prefer if it was a static image that had no scroll bar.
-I would like to change the navigational toolbar font to red also (as with all fonts on the site if possible).

BLOG/PORTFOLIO CHANGES:
-I would like all the font on this page to be red.
-I am having trouble adding a header image. When I upload it, there only seems to be white space where my logo and text should be..
-I would also like to change the background from grey to white.
-I would also like the option to be able to enlarge the images/or make them stand alone on the blog page when selected.

SITE CHANGES:
-I would like to change all fonts to Lucida Sans Unicode and the colour red (apart from the navigational toolbar)

Thanks
James

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 4, 2017 at 1:28 am
Copy link
Hi James,
For the grey area below the image on the home page, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see how that works for you. On the scroll bar issue, we can’t really control the height of a visitor’s browser, and if they have a monitor that is not too tall, or have their window set not too tall, then there will be a scroll bar.
```
.home #content {
  display: none;
}
.home .site-header {
  margin-bottom: 0;
}
```
On the navigation, you can add the following. I pulled the red for the main color (first rule) from the red in the heart image, and the orange-ish yellow for the hover color (second rule) from there as well. I’ve wrapped these in a Media Query so that it doesn’t affect the touch device menu.
```
@media screen and (min-width: 46em) {
.main-navigation a, .main-navigation a:visited {
  color: #FF0418;
}
.main-navigation li:hover > a, .main-navigation li.focus > a {
  color: #FFAC17;
}
}
```
For the text on pages, add the following, which appears to catch everything.
```
body, .entry-title, .entry-title a, .entry-title a:visited, .entry-title a:hover, .entry-meta a, .site-info a {
  color: red !important;
}
```
On the background color for pages, go to Customize > Colors & Backgrounds, click on the rectangular grey bar under background and you can change the color to white.

On the image “stand alone” I’m not sure what you are wanting there. You can link images to their respective media files when you insert them, or you can change them to do that by editing the images within the post editor.

On the font, add the following, which I think catches everything on the site.
```
body, h1, h2, h3, h4, h5, h6, a {
  font-family: "lucida sans unicode";
}
```
hartinart · Member · Jan 4, 2017 at 2:03 pm
Copy link
Thank you so much! That was exactly what I needed..

In terms of my portfolio page, I want my images to pop up separately in a box at a bigger scale when you click on them. As at the moment, not all my images fit within the screen when scrolling down the page.
Perhaps I shouldn’t use a blog page to upload them onto? Are there other pages where I can upload them onto?
I also don’t want the additional information like date/leave a comment to be there. I want it to be a simple page, with white space, with the images a similar size to how they are now. But, with the option to click on them so they then appear bigger in a separate box the same size as the screen (or close to the size of the screen).

Thanks
James
thesacredpath · Member · Jan 4, 2017 at 7:56 pm
Copy link
I want my images to pop up separately in a box at a bigger scale when you click on them.

That isn’t possible here at WordPress.com. I have a couple of suggestions though.

About the only way to do that would be to add a gallery to a page and then when an image is clicked on, it opens in the image carousel and people could then click through the images. If you go to the Gallery page on the Affinity demo site and scroll down to A Tiled Gallery and click on one of the images, you can see the image carousel in action.
hartinart · Member · Jan 6, 2017 at 3:28 pm
Copy link
Yes okay, I like this style. How can I apply this to my site?
And is there a limit to the amount of images I can use? Or will I just have to use multiple tiles?

Thanks
James
thesacredpath · Member · Jan 6, 2017 at 9:45 pm
Copy link
James, see our Galleries and Slideshows support page for information on adding it to a page or post.

On the number of images, the thing to keep in mind is that it takes time for a browser to download and render each image in the gallery, so the more images you add to a gallery on a page or post, the longer it is going to take for that page to load, and given that so many people are surfing the web over wifi or cellular data on tablets and phones, it is always a good idea to keep that in mind and not get to image heavy on pages and posts. If you have lots of images you wish to show, it is best to group those images by type/location/etc. and then put those each into its own page or post.
hartinart · Member · Jan 16, 2017 at 4:07 pm
Copy link
Thank you for your support concerning my website.

I have noticed, when I access my site via a phone device that the navigational toolbar (welcome, portfolio, about) does not appear. And it is only when you chance press the top right corner that a menu then appears at the bottom. Is there some way in which this menu can appear without having to prompt it, as I feel people visiting my site may be confused.

Thanks
James
thesacredpath · Member · Jan 17, 2017 at 5:11 am
Copy link
Hi James, the text and border color on the menu icon are set to white. Add the following, which changes them to your red non-hover and the yellow-orange on hover.
```
button.menu-toggle {
	color: #FF0418;
	border-color: #FF0418;
}
button.menu-toggle:hover {
	color: #FFAC17;
	border-color: #FFAC17;
}
```
corischubert · Member · Feb 25, 2017 at 7:18 pm
Copy link
Hi, I want to change the color of the menu bar too.
But I can’t find CSS under Customize..?
At the moment I have a grey bar, so that one can read he menu ( https://teradaprize.com/ ) but I would like to change it into a readable grey.
Please help me!
thesacredpath · Member · Feb 25, 2017 at 8:02 pm
Copy link
Hi @corischubert, Custom CSS is part of the WordPress.com Premium Plan upgrade. You would need to upgrade in order to add the custom CSS to change the menu bar color.
corischubert · Member · Feb 26, 2017 at 10:40 am
Copy link
Thank you for your fast reply thesacredpath!! So I guess there is not any other method than to upgrade to Premium to change the menu color..
thesacredpath · Member · Feb 27, 2017 at 7:37 pm
Copy link
No, sorry, there is not. Let us know if you have additional questions.

No items found.