Dyad theme

dollylynn · Member · Mar 28, 2016 at 2:45 pm
Copy link

Add topic to favorites
Hello I’m having three different problems with my theme.
1. is there any way to make the header smaller (vertically speaking) it’s cutting away from some of my photo?
2. at the top of each page there is a little circle logo that came with the theme, any way I can make that my own logo instead?
3. on my Contact page under the main image I was wanting to alight another image to the left with the contact info to the right of it, but it doesn’t seem to want to let me put image and txt all on the same plane, any ideas?

These have to be CSS problems because I’ve looked the sight over for ways to change these and can’t find any.

the site im referencing is http://amberraedunn.com/

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 29, 2016 at 2:02 am
Copy link
Hi there,

1. is there any way to make the header smaller (vertically speaking) it’s cutting away from some of my photo?

Can you be a bit more specific on that? Are you talking about the grey translucent band at the top with the title and menu in it?

2. at the top of each page there is a little circle logo that came with the theme, any way I can make that my own logo instead?

We can do that. This would be the basic code for that.
```
.is-singular .entry-inner::before, .error404 .entry-inner::before {
    content: url("URL_OF_IMAGE");
}
```
You would replace URL_OF_IMAGE between the quote marks with the URL of your uploaded image.

And this is the background color for the circle, if you should wish to change that. The circle of color is about 36px x 36px, so unless you would want to increase that, your image or icons should be about the same or less.
```
.is-singular .entry-inner::after, .error404 .entry-inner::after {
    background-color: #01a2a6;
}
```
3. on my Contact page under the main image I was wanting to alight another image to the left with the contact info to the right of it, but it doesn’t seem to want to let me put image and txt all on the same plane, any ideas?

Are you wanting the image you now have at the top of that page with the contact stuff to the right of it, or a different image? It’s doable, either way.
dollylynn · Member · Mar 30, 2016 at 3:05 pm
Copy link
1. Yes. Grey translucent band…..how can I make that a little smaller (vertically speaking)

3. No I have a new image I wanted just under that top image, but I wanted 4 lines of txt off from that.
It will let me do it when I’m designing but when I publish it moves.
thesacredpath · Member · Mar 31, 2016 at 1:49 am
Copy link
Thanks for the clarifications.

On #1, add this to your custom CSS and see if this works for you. We can’t really go much less than this.
```
.site-header {
    padding-top: 0;
    padding-bottom: 0;
}
```
On #3, this is sort of shooting from the hip since I don’t have the image to work with at this point. First off, you would add the following to your contact form page from within the Text tab in the editor. In the first div, you would insert your image and set it for an alignment of “none”. I would suggest doing “medium” as the size to start with and we can go from there. It is easiest to do this from within the Text tab so that you can be sure and have your cursor in between the two div tags. Then add the text to the second div (again easiest to start with if you do this from the Text tab).
```
<div class="left-contact">image code</div>
<div class="right-contact">Text to go on right</div>
```
Then add this to your custom CSS.
```
.left-contact {
float: left;
width: 45%;
}
.right-contact {
float: right;
width: 45%;
text-align: left;
}
@media screen and (max-width: 600px) {
.left-contact {
width: 100%;
}
.right-contact {
float: left;
width: 100%;
}
}
```
I’ve included a Media Query to stack the text below the image and take both of the divs to full width on narrower screens/windows so that things look good and don’t go awry. Once you get that done, there may be some additional adjustments that will need to be made.
dollylynn · Member · Apr 6, 2016 at 9:41 pm
Copy link
Thank you SO much.
Last question, is there any way i can get rid of that little circle logo with the small squares in it that appears at the top of each of the pages? and possibly replace it with my own?
thesacredpath · Member · Apr 6, 2016 at 10:16 pm
Copy link
Hi there, in my original response above, I gave you the following code which would allow you to use your own image in that circle.
```
.is-singular .entry-inner::before, .error404 .entry-inner::before {
    content: url("URL_OF_IMAGE");
}
```
You would need to upload your image to your media library, get the URL of that image and the replace URL_OF_IMAGE between the quote marks with your image URL.
jovetement · Member · Apr 18, 2016 at 2:47 pm
Copy link
Hi, do you know how to make a shorter background in the header? I tried with some CSS but it didn’t worked.. And is it possible to just have the header menue and the image background on the home page as it is just a website? So without any articles or pages to dislpay??

my site is http:// jovetement.com

Thank you so much!!
thesacredpath · Member · Apr 18, 2016 at 8:22 pm
Copy link
Hi @jovetement, first off I see you have changed the color of the bottom footer area to white, which makes the WordPress.com and Theme footer credits invisible. Per our Terms of Service (#1 Attribution), those have to remain visible and readable. See the Frequently Asked Questions on the Custom Design support page for more information.

You can modify the existing CSS rule you have to bring those back with a lighter grey color by editing it and making it look like this.
```
.footer-bottom-info {
    background-color: #fff;
    color: #999;
}
```
The image you are using for your main page featured image is not tall enough to cover the entire area. Given that you are not going to be displaying any content on your main page, I would suggest, if you have it and can edit it, edit the original image and resize/crop it so that it is about 1230px x 1230px, which is the recommended size for Dyad. I can make the image fit, but then when I make my browser window wider, it is off again. Let me know your thoughts on this.
jovetement · Member · Apr 19, 2016 at 3:01 pm
Copy link
Hi Thesacredpath, thank you for you quick answer! I didn’t know concerning the footer bottom info, i’ve changed it!! Concerning the image, the problem is that I put it on the background header area, which alowed to load a image in 1800px x 720px only I think.. So how can I change this? thank you again and have a good day!
thesacredpath · Member · Apr 19, 2016 at 11:27 pm
Copy link
The image you are using is 1714 x 719 pixels. Can you redo that image in your image editing program and crop it to 1820 x 720 pixels? I’ve tested Dyad with that size image and there isn’t any whitespace around the image.
jovetement · Member · Apr 25, 2016 at 3:27 pm
Copy link
Thank you again Thesacredpath! I’ve finally decided to keep this size for my image! One last question, do you know how can I put the facebook plug in on the very bottom of the footer area? like really just above the wordpress credit (but on the left part) and not at the same level than my other widget? Thank you and have a good day!
thesacredpath · Member · Apr 25, 2016 at 10:30 pm
Copy link
We could use position: absolute, but that can be problematic. If you wish to add the FB widget to the footer widget area (I would suggest on the left side, I can see if I can get the relocation to work reliably.

No items found.